less && scss

less

變量（Variables）
@width: 10px;
#header { width: @width;  }


混合（Mixins）
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
#menu a { color: #111; .bordered(); }


嵌套（Nesting）
.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}


@規則嵌套和冒泡
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}
編譯爲：
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}


運算（Operations）
@base: 5%;
@filler: @base * 2; // 結果是 10%
@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 結果是 calc(50% + (25vh - 20px))

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
編譯爲：
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}
注意，從 Less 3.5 開始，可以簡寫爲：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
在 Less 3.5+ 版本中，許多以前需要“引號轉義”的情況就不再需要了。


函數（Functions）
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}


映射（Maps）
#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
輸出符合預期：
.button {
  color: blue;
  border: 1px solid green;
}


作用域（Scope）
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}


導入（Importing）
@import "library"; // library.less
@import "typo.css";

 

 

 

scss記錄（sass）
 

變量($)  : 
  $primary-color: #333;                  

  body {  color: $primary-color;  }



嵌套 ：

 nav {
       ul {
          list-style: none;
        }

         li { display: inline-block; }

a {
    text-decoration: none;

         &：hover{

               cursor：pointer；

                       }
                }
          }

引用父級選擇器"&"：

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
}



引入：

// _reset.scss
html, body, ul {
  margin:  0;
  padding: 0;
}

// base.scss

//可以省略後綴名
@import 'reset';   
body {
  background-color: #efefef;
}



混合 :

@mixin border-radius($radius) {
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}



繼承：
%message-common {
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}



操作符：

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}





嵌套屬性：



/*===== SCSS =====*/
.demo {
  // 命令空間後帶有冒號:
  font: {
    family: fantasy;
    size: 30em;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em; }



註釋： /* */    //





 插值語句 #{} (Interpolation: #{})   
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

編譯爲

p.foo {
  border-color: blue; }




函數指令 (Function Directives)
Sass 支持自定義函數，並能在任何屬性值或 Sass script 中使用：

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }


編譯爲

#sidebar {
  width: 240px; }