預(yù)編譯語(yǔ)言 Sass Less Stylus之間的區(qū)別

• Less是基于JavaScript，是在客戶端處理的。其缺點(diǎn)是比起SASS來(lái)，可編程功能不夠，不過(guò)優(yōu)點(diǎn)是簡(jiǎn)單和兼容CSS。
• Sass是基于Ruby，是在服務(wù)器端處理的。
• Stylus主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持。語(yǔ)法自由度很高。

了解 PostCSS

學(xué)習(xí)less

官網(wǎng)less

• npm install -g less
• lessc style.less style.css

嵌套規(guī)則

操作

• LESS支持一些算術(shù)運(yùn)算，例如加號(hào)(+)，減號(hào)( - )，乘法(*)和除法(/)

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}

轉(zhuǎn)義

• ?“some_text"中的任何內(nèi)容將顯示為 some_text

p {
  color: ~"green";
}

函數(shù)

• 如圓函數(shù)，floor函數(shù)，ceil函數(shù)，百分比函數(shù)等。

@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
 width: percentage(@width);
}

命名空間和訪問(wèn)器

• 它用于將mixins分組在通用名稱下。 使用命名空間可以避免名稱沖突，并從外部封裝mixin組。

.class1 {
  .class2 {
    .val(@param) {
      font-size: @param;
      color:green;
    }
  }
}

.myclass {
  .class1 > .class2 > .val(20px);
}

變量范圍

• 變量范圍指定可用變量的位置。 變量將從本地作用域搜索，如果它們不可用，則編譯器將從父作用域搜索。

@var: @a;
@a: 15px;

.myclass {
  font-size: @var;
  @a:20px;
  color: green;
}

導(dǎo)入

@import "http://www.w3cschool.cn/less/myfile.less";
@import (less, optional) "custom.css";

變量

• @變量名：變量值

擴(kuò)展

• &是父級(jí)選擇器的引用
• Extend是一個(gè)LESS偽類，它通過(guò)使用:extend 選擇器在一個(gè)選擇器中擴(kuò)展其他選擇器樣式。

h2 {
  &:extend(.style);//給.style加上extend所在父級(jí)的樣式
  font-style: italic;
}
.style {
  background: green;
}
//編譯后
h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}

.style:extend(.container, .img)
{
  background: #BF70A5;
}
.container {
  font-style: italic;
}
.img{
   font-size: 30px;
 }

.style {
  background: #BF70A5;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}
 

混合

• Mixins是一組CSS屬性，允許您將一個(gè)類的屬性用于另一個(gè)類，并且包含類名作為其屬性。

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}

混合參數(shù)

• 參數(shù)mixin使用一個(gè)或多個(gè)參數(shù)，通過(guò)參數(shù)和其屬性來(lái)擴(kuò)展LESS的功能，以便在混合到另一個(gè)塊時(shí)自定義mixin輸出。

.border(@width; @style; @color) {
    border: @width @style @color;
}

.myheader {
    .border(2px; dashed; green);
}

將規(guī)則集傳遞給Mixins

@detached-ruleset: {
    .mixin() {
        font-family: "Comic Sans MS";
        background-color: #AA86EE;
    }
};

.cont {
    @detached-ruleset();
    .mixin();
}


.cont {
  font-family: "Comic Sans MS";
  background-color: #AA86EE;
}

Mixin Guards

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}

.class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}

CSS Guards ???

@usedScope: global;
.mixin() {
  @usedScope: mixin;
  .cont when (@usedScope=global) {
    background-color: red;
    color: black;
  }
  .style when (@usedScope=mixin) {
    background-color: blue;
    color: white;
  }
  @usedScope: mixin;
}
.mixin();

.style {
  background-color: blue;
  color: white;
}

循環(huán)

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}