Back to site

Дынамічны мова стыляў

МЕНШЫЯ пашырае CSS з дынамічным паводзінамі, такім як зменныя, Mixins, аперацый і функцый. МЕНШЫЯ працуе як на баку кліента (IE 6 +, Webkit, Firefox) і на баку сервера з Node.js.

Версія 1.1.3

Стварыць некалькі менш:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}
.box { @base: #f938ab;
  color:        saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0, 0, 5px, 0.4) }
}Уключыце less.js з стылях:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins дазволіць вам ўстаўляць усе ўласцівасці класа ў іншы клас, проста уключаючы імя класа, як адно з яго уласцівасцяў. Гэта проста, як зменныя, але і для цэлых класаў. Mixins таксама можа паводзіць сябе як функцыі, і прымаць аргументы, як відаць на прыведзеным ніжэй.

// LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/* Compiled CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Укладзеныя правілаў

Замест пабудовы доўгіх імёнаў селектар паказаць спадчыны, у чым менш вы можаце проста гняздо селектары ўнутры іншых селектараў. Гэта робіць спадчыну ясна і стыляў Ш.orter.

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Функцыі і аперацыі

Некаторыя элементы ў табліцы стыляў прапарцыйна з іншымі элементамі? Аперацыі дазваляюць складання, аднімання, множанне і дзяленне значэнняў уласцівасцяў і колеру, што дае вам магчымасць ствараць складаныя адносіны паміж ўласцівасцямі. Функцыі адзін-на-адзін з кодам JavaScript, што дазваляе маніпуляваць значэннямі аднак вы want.

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

На баку кліента выкарыстанне

Вашу спасылку .less стыляў з rel усталяваны ў становішча " stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Затым запампуйце less.js з верхняй частцы старонкі і ўключыць яго ў <head> элемент старонкі, напрыклад так:

<script src="less.js" type="text/javascript"></script>

Пераканайцеся, што вы ўключаеце ваш стыляў да сцэнара.

На баку сервера выкарыстанне

Ўстаноўка

Самы просты спосаб ўсталяваць менш на сервер, ажыццяўляецца праз ЭЯЬ , вузел менеджэр пакетаў, як гэта:

$ npm install less

Гэта дапаможа вам апошнюю стабільную версію. Калі вы хочаце краі, паспрабуйце:

$ npm install less@latest

Выкарыстоўвайце

Пасля ўстаноўкі, вы можаце выклікаць кампілятар ад вузла, як такі:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});

якая будзе выводзіць

.class {
  width: 2;
}

Вы таксама можаце выклікаць ўручную аналізатар і кампілятара:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

Канфігурацыя

Вы можаце перадаць некаторыя параметры для кампілятара:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {
    tree.toCSS({ compress: true }); // Minify CSS output
});

Параметры каманднага радка, выкарыстанне

Менш пастаўляецца з бінарнымі, якая дазваляе выклікаць кампілятар з каманднага радка, як такі:

$ lessc styles.less

Гэта выведзе складзены CSS на stdout , вы можаце перанакіраваць яго ў файл на ваш выбар:

$ lessc styles.less > styles.css

Гэта выведзе складзены CSS на stdout , вы можаце перанакіраваць яго ў файл на ваш выбар:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Выйсці:

#header { color: #6c94be; }

Акрамя таго, можна вызначаць зменныя з імем зменнай:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

Якія кампілюецца ў:

content: "I am fnord.";

Звярніце ўвагу, што зменныя ў МЕНШЫЯ на самай справе "канстант" у тым, што яны могуць быць вызначаны толькі адзін раз.

Mixins

У менш, можна ўключыць кучу уласцівасцяў ад аднаго набору правіл у іншы набор правілаў. Так што ў нас ёсць наступны клас:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

І мы хочам выкарыстаць гэтыя ўласцівасці ў іншыя наборы правілаў. Ну, мы проста павінны адкінуць у імя класа ў любым наборы правілаў мы хочам ўключыць яго ўласцівасці, напрыклад, так:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

Уласцівасці .bordered клас з'явіцца ў абодвух #menu a і .post a :

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Любы CSS клас, ID або элемента набор правілаў можа быць змешанай такім чынам.

Параметрычны Mixins

МЕНШЫЯ мае асаблівы тып набору правілаў, якія могуць быць зьмяшаныя ў такіх як класы, але прымае параметраў. Вось кананічны прыклад:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

А вось як мы можам змяшаць яго ў розных набораў правіл:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  } 

Параметрычны Mixins таксама могуць мець значэння па змаўчанні для іх параметры:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Мы можам спасылацца на яго, як гэта зараз:

#header {
  .border-radius;  } 

І ён будзе ўключаць 5px мяжы радыусу.

Вы можаце таксама выкарыстоўваць параметрычныя Mixins, якія не прымаюць параметры. Гэта карысна, калі вы хочаце, каб схаваць ад набору правілаў CSS выхад, але вы жадаеце ўключыць яго ўласцівасці ў іншых набораў правіл:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Які б выхад:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

@arguments зменнай

@arguments мае асаблівае значэнне ў Mixins, ён утрымоўвае ўсе аргументы, калі прымешка была выклікана. Гэта карысна, калі вы не хочаце мець справу з індывідуальнымі параметрамі:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

У выніку чаго:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

Укладзеныя правілаў

МЕНШЫЯ дае вам магчымасць выкарыстаць ўкладзенасць замест або ў спалучэнні з каскадных. Дапусцім, мы маем наступны CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;} 

У менш, мы можам таксама напісаць аб гэтым так:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Або так:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

Атрыманы код з'яўляецца больш кароткім, і імітуе структуру вашага DOM tree .

Звярніце ўвагу & камбінатар-ён выкарыстоўваецца, калі вы хочаце укладзеных селектар быць concatinated бацькоўскага выбару, замест таго каб дзейнічаць як нашчадак. Гэта асабліва важна для псеўда-класы, як :hover і :focus .

Напрыклад:

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

Выведзе

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

Аперацыі

Любое колькасць, колеру скуры або зменнай можа працаваць на. Вось некалькі прыкладаў:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

Выхад вельмі многае, што вы чакаеце-LESS разумее розніцу паміж кветкамі і агрэгатаў. Калі прылада выкарыстоўваецца ў аперацыі, як ў:

@var: 1px + 5;

Менш будзе выкарыстоўваць гэта прылада для канчатковага вываду- 6px ў гэтым выпадку.

Кранштэйны таксама упаўнаважаным у аперацыях:

width: (@var + 5) * 2;

І патрабуюцца ў злучэнні значэнняў:

border: (@width * 2) solid black;

Колер функцый

МЕНШЫЯ прадастаўляе розныя функцыі, пераўтварэння кветак. Колеры спачатку пераўтворацца ў колеры HSL-прастору, а затым маніпуляваць на канальным узроўні:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

З іх дапамогай даволі проста:

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

Вы можаце таксама атрымаць інфармацыю аб колеры:

hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the 'lightness' channel of @color

Гэта карысна, калі вы хочаце стварыць новы колер на аснове канала іншага колеру, напрыклад:

@new: hsl(hue(@old), 45%, 90%);

@new будзе мець @old 'S адценне, і яго ўласныя насычанасць і лёгкасць.

Прасторы імёнаў

Часам, вы можаце згрупаваць зменныя або Mixins, для арганізацыйных мэтаў, ці проста прапанаваць некаторыя інкапсуляцыі. Вы можаце зрабіць гэта даволі інтуітыўна У менш, вы хочаце, каб расслаенне некаторыя Mixins і зменныя пад #bundle , для наступнага паўторнага выкарыстання або для распаўсюду:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Цяпер, калі мы хочам, каб прымешка .button класа ў нашай #header a , мы можам зрабіць:

#header a {
  color: orange;
  #bundle > .button;} 

Сфера

Вобласць у МЕНШЫЯ вельмі падобная на што з моў праграмавання. Зменныя і Mixins спачатку паглядзеў на месцы, і калі яны не будуць знойдзеныя, кампілятар будзе выглядаць у бацькоўскай вобласці, і гэтак далей.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

Каментары

CSS-стыляў каментары захоўваюцца менш:

/* Hello, I'm a CSS-style comment */
.class { color: black }

Аднарадковы каментары справядлівыя і ў менш, але яны "маўчаў", яны ніколі не з'яўляліся ў складзены CSS выйсце:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Імпарт

Вы можаце імпартаваць .less файлаў, і ўсё зменныя і Mixins ў іх будуць размешчаны на асноўны файл. .less пашырэнне не з'яўляецца абавязковым, так як з іх не падыходзіць:

@import "lib.less";
@import "lib";

Калі вы жадаеце імпартаваць CSS файл, і не хочуць менш апрацаваць яго, проста выкарыстоўваць .css пашырэннем:

@import "lib.css";

Дырэктыва будзе проста пакінуць як ёсць, і ў канчатковым выніку ў CSS выхад.

String інтэрпаляцыі

Зменныя могуць быць змясціць ўнутры радка ў аналагічны спосаб Ruby або PHP, з @{name} пабудаваць:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Экранаванне

Часам вам можа спатрэбіцца для вываду CSS значэнне, якое альбо не Сапраўдны CSS сінтаксіс, або выкарыстоўвае propriatery сінтаксіс якіх менш не прызнае.

Для высновы такога значэння, мы змяшчаем яе ўнутр радка з прэфіксам ~ , напрыклад:

.class {
  filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')";
}

Гэта называецца "пазбег значэнне", што прывядзе да:

.class {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
}

JavaScript ацэнкі

JavaScript выразы могуць быць ацэненыя ў якасці значэнняў ўнутры. Менш файлаў. Гэта робіцца шляхам заключэння выраз з бэк-кляшчоў:

@var: `"hello".toUpperCase() + '!'`;

Становіцца:

@var: "HELLO!";

Звярніце ўвагу, што вы можаце таксама выкарыстоўваць інтэрпаляцыі і пазбегнуць як са радкамі:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Становіцца:

@var: HELLO!;

Таксама можна атрымаць доступ да асяроддзя JavaScript:

@height: `document.body.clientHeight`;

Аб

МЕНШЫЯ быў распрацаваны Алексіс Sellier , больш вядомы як cloudhead .

харчаванне ад Toto , МЕНШЫЯ і hiless

Аўтарскія правы © Аляксей Sellier 2010

Published (Last edited): Jun 6 , source: http://www.lesscss.org/