<noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

    <noframes id="5hjpd">

    <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
      <noframes id="5hjpd">
      <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
      <del id="5hjpd"><big id="5hjpd"></big></del>
      <track id="5hjpd"></track>

      動態樣式語言Scss&Less介紹與區別

      導語 一 Sass Scss&Less是什么?Sass(Syntactically Awesome Stylesheets)是一種動態樣式語言,語法跟css一樣(但多了些功能),比css好寫,而且更容易閱讀。Sass語法類似與Haml,屬于縮排語法(makeup),用意就是

      一. Sass/Scss&Less是什么?

      Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言,語法跟css一樣(但多了些功能),比css好寫,而且更容易閱讀。Sass語法類似與Haml,屬于縮排語法(makeup),用意就是為了快速寫Html和Css。

      Less一種動態樣式語言. 將CSS賦予了動態語言的特性,如變量,繼承,運算, 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox),也可一在服務端運行 (借助 Node.js)。less英文站需要翻墻,也可以訪問中文站

      scss與less的區別

      Sass與Scss有什么差別

      Sass原先跟Haml一樣的縮排語法,對于寫慣Css的前端來說是很不直觀的,也不能將原來的Css加到Sass里面,因此Sass改良了語法,Sass 3就變成了Scss(Sassy CSS)。與原來的語法兼容,只是用{}取代了原來的縮進。

      Sass

      .content
        margin:10px auto
        h1
          font-size:24px;
      

      Scss

      .content{
        margin:10px auto
        h1{
          font-size:24px;
        }
      }
      

      二. Sass/Scss&Less區別?

      1.Sass是基于Ruby的,是在服務端處理的,而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器,也可以在開發環節使用Less,然后編譯成Css文件,直接放到項目中,也有Less.app、SimpleLess、CodeKit.app這樣的工具,也有在線編譯地址。

      2.變量符不一樣,less是@,而Scss是$,而且變量的作用域也不一樣,后面會講到。

      3.輸出設置,Less沒有輸出設置,Sass提供4中輸出選項:nested, compact, compressed 和 expanded。

      4.Sass支持條件語句,可以使用if{}else{},for{}循環等等。而Less不支持。

      /* Sample Sass "if" statement */
      
      @if lightness($color) > 30% {
        background-color: #000;
      } @else {
        background-color: #fff;
      }
      
      /* Sample Sass "for" loop */
      @for $i from 1 to 10 {
        .border-#{$i} {
          border: #{$i}px solid blue;
        }
      }
      

      三. Sass/Scss&Less的共同特征

      1.變量

      允許我們單獨定義通用的樣式,這樣可以在css中調用。

      Less 變量

      @color:#4d926f;
      #header{
        color:@color;
      }
      h2{
        color:@color;
      }
      

      Scss 變量

      $color:#4d926f;
      #header{
        color:$color;
      }
      h2{
        color:$color;
      }
      

      編譯后的css

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

      2.混合

      混合可以將一個定義好的class A輕松的引入到另一個class B中,從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用,就像使用函數一樣。

      Less 混合

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

      Scss 混合

      @mixin rounded-corners ($radius: 5px) {
        border-radius: $radius;
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
      }
      
      #header {
        @include rounded-corners;
      }
      #footer {
        @include rounded-corners(11px);
      }
      

      編譯后的css

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

      3.嵌套

      我們可以在一個選擇器中嵌套另一個選擇器來實現繼承,這樣很大程度減少了代碼量,并且代碼看起來更加的清晰。
      Less 嵌套

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

      Scss 嵌套

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

      編譯后的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;
      }
      

      3.函數&運算

      運算提供了加,減,乘,除操作;我們可以做屬性值和顏色的運算,這樣就可以實現屬性值之間的復雜關系。
      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%);
      }
      

      Scss-函數運算

      $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%);
      }
      

      編譯后的css

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

      4.color函數

      提供了一系列的顏色運算函數. 顏色會先被轉化成 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 */
      

      Scss同樣也支持color函數,只需要將@改為$即可。

      5.作用域

      Less-作用域

      @color: #00c; /* 藍色 */
      #header {
        @color: #c00; /* red */
        border: 1px solid @color; /* 紅色邊框 */
      }
      #footer {
        border: 1px solid @color; /* 藍色邊框 */
      }
      

      Less-作用域編譯后

      #header{border:1px solid #cc0000;}
      #footer{border:1px solid #0000cc;}
      

      scss-作用域

      $color: #00c; /* 藍色 */
      #header {
        $color: #c00; /* red */
        border: 1px solid $color; /* 紅色邊框 */
      }
      #footer {
        border: 1px solid $color; /* 紅色邊框 */
      }
      

      Scss-作用域編譯后

      #header{border:1px solid #c00}
      #footer{border:1px solid #c00}
      

      我們可以看出來,less和scss中的變量會隨著作用域的變化而不一樣,因為我們在#header中重新定義了color變量,變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之后的所有地方,如果沒有被重新定義,都會保持那個原始的值。

      作用域在Sass中稍有不同。在上面的代碼中,當@color變量變為紅色后,代碼中,此處之后的該變量的值,將會被重寫(成為紅色)。上面的例子能很好的解釋這點。

      6.Importing

      文件引入
      Less-import

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

      在Scss中,也是可以import。
      scss-import

      //需要被 import 的文件必須以 _開頭命名,如 _rounded.scss
      @import "rounded";
      

      四. Sass/Scss安裝

      Scss的安裝需要Ruby環境

      $ gem install sass
      

      安裝后就可以直接編譯Sass了

      $ sass --watch style.scss:style.css
      

      還有一個利器就是大名頂頂的Compass,后面我會用一篇博文來介紹下。

      五. Less安裝使用

      1.在客戶端使用

      引入你的 .less 樣式文件的時候要設置 rel 屬性值為 “stylesheet/less”:

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

      然后在Less官網下載 less.js, 在 中引入:

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

      注意你的less樣式文件一定要在引入less.js前先引入。

      2.在服務端安裝使用

      * 安裝

      在服務器端安裝 LESS 的最簡單方式就是通過 npm(node 的包管理器), 像這樣:

      $ npm install less
      

      如果你想下載最新穩定版本的 LESS,可以嘗試像下面這樣操作:

      $ npm install less@latest
      

      * 使用

      在命令行下使用

      你可以在終端調用 LESS 解析器:

      $ lessc styles.less
      

      上面的命令會將編譯后的 CSS 傳遞給 stdout, 你可以將它保存到一個文件中:

      $ lessc styles.less > styles.css
      

      如何你想將編譯后的 CSS 壓縮掉,那么加一個 -x 參數就可以了.
      還有些編譯工具上面也有講過,那些更加的方便。

      http://www.randomwithlife.com/ true 動態樣式語言Scss&Less介紹與區別 http://www.randomwithlife.com/show-11-590-1.html report <?php echo strlen($content) / 2; ?> 一 Sass Scss&Less是什么?Sass(Syntactically Awesome Stylesheets)是一種動態樣式語言,語法跟css一樣(但多了些功能),比css好寫,而且更容易閱讀。Sass語法類似與Haml,屬于縮排語法(makeup),用意就是
      TAG:Scss Less
      本站歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動成果
      轉載請注明: 文章轉載自:愛思資源網 http://www.randomwithlife.com/show-11-590-1.html

      [前端插件推薦] Plugin

      1 2 3 4
      • jQuery實現逐字逐句顯示插件l-by-l.min.js
      • jQuery帶方向感知的鼠標滑過圖片邊框特效插件
      • jQuery HotKeys監聽鍵盤按下事件keydown插件
      • 響應式無限輪播jQuery旋轉木馬插件
      響應式無限輪播jQuery旋轉木馬插件
      web前端開發
      愛思資源網 Copyright 2012-2014 www.randomwithlife.com All rights reserved.(晉ICP備13001436號-1)
      欧美精品久久久久久久自慰

      <noframes id="5hjpd"><progress id="5hjpd"><form id="5hjpd"></form></progress>

        <noframes id="5hjpd">

        <span id="5hjpd"><progress id="5hjpd"><progress id="5hjpd"></progress></progress></span>
          <noframes id="5hjpd">
          <ins id="5hjpd"><sub id="5hjpd"><rp id="5hjpd"></rp></sub></ins>
          <del id="5hjpd"><big id="5hjpd"></big></del>
          <track id="5hjpd"></track>