sass入門，sass入門教程

sass入門，sass入門教程

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

SASS 官網介紹：

sass is the most mature（成熟的）,stable（穩定的）,and powerful professional grade CSS extension language in the world.

官方文檔：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

初學sass 遇到的最大阻礙可能是：需要搭建Ruby的運行環境和需要用命令列，其實這都非常簡單。

一、安裝1、安裝Ruby

SASS是Ruby語言寫的，但是兩者的文法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，然後再安裝SASS。

安裝SASS請參考SASS官方網站：  http://sass-lang.com/install，windows下安裝ruby:rubyinstaller.org。

安裝時注意一點：勾選Add Ruby executables to your PATH，添加Ruby可執行路徑到環境變數再安裝。

安裝成功Dos視窗輸入ruby -v會出現版本資訊。

2、安裝sass

假定你已經安裝好了Ruby，接著在命令列輸入下面的命令：gem install sass

安裝成功輸入sass -v可以看到版本資訊。

 

二、使用 1、編譯

Note:注意sass的檔案名稱尾碼是scss而不是sass。

將style.scss編譯成css

sass style.scss

將style.scss編譯後儲存成css檔案

sass style.scss style.css

將style.scss編譯後儲存成壓縮過的css檔案

sass --style compressed style.scss style.css

--style控制編譯風格，選擇性參數如下

• nested：嵌套縮排的css代碼，它是預設值。
• expanded：沒有縮排的、擴充的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

sass監聽檔案或目錄，源檔案有變動，自動編譯。 

// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss

2、文法2.1、注釋

和less一樣，sass有兩張注釋

// 單行注釋，不會作為最終輸出/*     多行注釋，以原生CSS的/*注釋....*/形式作為最終輸出 */

在/*後面加一個驚嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明著作權資訊。 

/*!　　　　重要注釋！*/

2.2、變數

一般會把顏色，字型，將來會重用的css值存為變數，方便統一修改和維護。

//定義變數$primary-color:#333;//變數調用body{    color:$primary-color;}

如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中。

$side : left;.rounded{    border-#{$side}-radius:5px;}

2.3、嵌套

像html標籤嵌套一樣進資料列選取器嵌套寫css，但是在產生css時有利有弊。 

以下經典用法。

nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

會產生：

nav ul {  margin: 0;  padding: 0;  list-style: none; }nav li {  display: inline-block; }nav a {  display: block;  padding: 6px 12px;  text-decoration: none; }

屬性也可以嵌套，比如border-color屬性如下，border後面必須加冒號。

p{   border:{        color:red;    }}

在嵌套的代碼塊內，可以使用&引用父元素。比如a:hover偽類，可以寫成：

a{    &:hover{color:red;}}

2.4、Less css片段和引入

目的：方便模組化和管理，小模組可維護性好。最終編譯成一個css檔案，這點比純css的@import好。

弊端：多一個@import就多一個http請求。

片段命名：_partial.scss，引入用@import。 

Demo:將_reset.scss import到base.scss。

_reset.scss如下

// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

base.scss如下

// base.scss@import 'reset';
body {  font: 100% Helvetica, sans-serif;  background-color: #efefef;}

@import 'reset'即可。

2.5、mixin 重用代碼塊

在sass中可用定義重用的代碼塊，且可傳參數，方便日後根據需求調用。

定義：通過@minxin name即可定義一個重複利用的樣式。

調用：@include name

demo:

// mixin@mixin box($H:30px,$col:red){    height:$H;    background-color:$col;}div.box{    @include box; //使用預設值}div.box1{    @include box(50px,blue); //傳參}

 編譯結果：

div.box {  height: 30px;  background-color: red; }div.box1 {  height: 50px;  background-color: blue; }

css中有一些瀏覽器安全色性的代碼，一些css3私人首碼等，此時使用mixins非常便捷，一個經典例子border-radius如下。

@mixin border-radius($radius){    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    -ms-border-radius: $radius;          border-radius: $radius;}.box{@include border-radius(10px);}

2.6、繼承 

繼承讓一個選取器的樣式被另一個選取器複用和覆蓋。是一個DRY的文法，也最sass中有用的文法之一。

文法：@extend 選取器

demo:一系列提示資訊。

.message{    border:1px solid #ccc;    padding:10px;    color:#333;}.success{    @extend .message;    border-color:green;}.error{    @extend .message;    border-color:red;}.warning{    @extend .message;    border-color:yellow;}

編譯後的css【繼承實現了css組合聲明】

.message, .success, .error, .warning {  border: 1px solid #ccc;  padding: 10px;  color: #333; }.success {  border-color: green; }.error {  border-color: red; }.warning {  border-color: yellow; }

2.7、運算子 

包括+，-，*，、，%。

demo:計算aside和article的寬度。 

.container{    width:100%;}article[role="main"]{    float:left;    width:600px/960px*100%;}aside[role="complimentary"]{    float:right;    width:300px/960px*100%;}

編譯後css

.container {  width: 100%; }article[role="main"] {  float: left;  width: 62.5%; }aside[role="complimentary"] {  float: right;  width: 31.25%; }

2.8、顏色 

sass中整合了大量的顏色函數，讓產生顏色更加簡單 

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

demo:

$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

編譯成css

a {  text-decoration: none;  color: #08c; }a:hover {  color: #006699; }

3、進階文法 3.1、條件 

if判斷何種條件用何種樣式。

p{    @if 1+1==2{border:1px solid red;}    @if 5<2 {border:2px dotted red;}}

if,else配合使用。

demo:判斷顏色中亮度大於30%，設定背景色為黑色，否則為白色。

$color : #1875e7;p{    @if lightness($color)>30%{        background-color:#000;    }@else {        background-color:#fff;    }}

備忘：lightness($color)：從一個顏色中擷取亮度（lightness）值；

3.2、 迴圈語句

 for迴圈

@for $i from 1 to 10{    .border-#{$i}{        border:#{$i}px solid blue;    }}

編譯產生如下css

.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }

 while迴圈

$i : 6;@while $i > 0{    .item-#{$i} {width:2em * $i;}    $i : $i - 2;}

編譯成css

.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }

each遍曆

@each $member in a,b,c,d{    .#{$member}{        background-image:url("images/#{$member}.jpg");    }}

編譯成css

.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }

3.3自訂函數

sass可自訂函數。

@function double($n){    @return $n * 2;}#sidebar{    width:double(5px);}

編譯後css

#sidebar {width: 10px; }

 

資源連結： 

http://sass-lang.com/guide

http://www.w3cplus.com/sassguide/ 

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5226661.html有問題歡迎與我討論，共同進步。