sass 使用入門教程

時間  2019-12-13
標籤 sass 使用 入門 教程 简体版
原文   原文鏈接

咱們都知道，css沒有變量，也沒有條件語句，在開發過程當中，不免有些麻煩，所以有了CSS預處理器(css preprocessor)，Sass即是其中之一。css

 

1、什麼是Sasshtml

Sass (Syntactically Awesome StyleSheets)是css的一個擴展開發工具，它容許你使用變量、條件語句等，使開發更簡單可維護。這裏是官方文檔。
css3

 

2、安裝是Sassgit

由於Sass依賴於Ruby環境，因此安裝Sass前，須要安裝Ruby環境，官網下載。
github

安裝時請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境web

（安裝Ruby時，路徑中請勿出現中文，避免後續安裝Sass失敗）gulp

安裝完Ruby環境後，在開始菜單中，找到剛纔安裝的ruby，打開Start Command Prompt with Ruby數組

而後直接命令行輸入瀏覽器

gem install sass

按回車確認，等待一段時間就會提示Sass安裝成功，如今由於牆的比較厲害，若是沒有安裝成功，請參考淘寶的RubyGems鏡像安裝sass，若是成功則忽略。sass

$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES ***
 https://ruby.taobao.org # 請確保只有 ruby.taobao.org
$ gem install sass

 

3、編譯Sass工具

Sass文件後綴爲 .scss，所以要編譯成 .css 文件。

1）命令行編譯

sass style.scss style.css

Sass 提供4種編譯風格

# nested：嵌套縮進的css代碼，它是默認值。
# expanded：沒有縮進的、擴展的css代碼。
# compact：簡潔格式的css代碼。
# compressed：壓縮後的css代碼。

生產環境當中，通常選擇最後一項。

sass --style compressed style.sass style.css

也能夠監聽某個文件或目錄，一旦文件發生改變，就自動生成編譯後文件

# 單文件監聽命令
sass --watch input.scss:output.css # 文件夾監聽命令
sass --watch app/sass:public/stylesheets

css文件轉成sass/scss文件（在線轉換工具，css2sass）

sass-convert style.css style.sass sass-convert style.css style.scss

2）GUI工具編譯

koala , 一個優秀的免費編譯器，界面清晰簡潔，操做起來也很是簡單，詳細介紹你們能夠移歩到大漠的博客：Less/Sass編譯工具，koala使用指南，點擊下載 koala 簡單操做以下圖：

 

 3）編輯器編譯

某些編輯器就內置了Sass編譯，如webstorm等，而sublime text也有相應的插件可使用：編譯，保存即編譯。

 4）自動化工具編譯，參考個人gulp 學習總結文章。

 

4、基本語法

 1）變量

 sass的變量名必須是一個$符號開頭，後面緊跟變量名

//sass 樣式
$red: #f00;
div {
   color: $red;   
}
// 編譯爲css後
div {
    color:#f00;   
}

特殊變量：若是變量嵌套在字符串中，則須要寫在 #{} 符號裏面，如：

$top: top;
div {
    margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默認變量：僅需在值後面加入 !default便可， 默認變量通常用來設置默認值，當該變量出現另一個值時，不管定義前後，都會使用另一個值，覆蓋默認值

$color: red;
$color: blue !default;
div {
    color: $color;    /* color:red; */
}

多值變量：多值變量分爲list類型和map類型，list有點像js對象中的數組，map類型像js中的對象

list : 可經過空格，逗號或小括號分割多個值，使用 nth($變量名, $索引)取值。 list數據操做有其餘函數，具體參考sass Functions

//一維數據
$px: 5px 10px 20px 30px;

//二維數據，至關於js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

// 例子
$px: 10px 20px;
div {
    margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map: 數據以key和value組成，格式：$map: (key1: value1, key2: value2); 經過map-get($map, $key); 

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

2）計算功能

 sass容許使用算式。

div {
    padding: 2px * 4px;
    margin: (10px / 2);
    font-size: 12px + 4px;    
}

3）嵌套

標籤嵌套

// sass 樣式
div {
    color: #333;
    a {
       font-size:14px; 
       &:hover {
          text-decoration:underline;
       }
    }
} 

// 編譯後css
div {
    color: #333;
}
div a {
    font-size:14px; 
}
div a:hover {
    text-decoration:underline;
}

屬性嵌套：

//sass 樣式
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css 編譯後樣式
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

 4）註釋

 sass有兩種註釋風格

標準css註釋： /* 註釋 */， 會保留到編譯後的文件中，壓縮則刪除

單行註釋： // 註釋

在標準註釋 /*後面加入一個感嘆號，表示重要註釋，壓縮模式也會保留註釋，用於版權聲明等。

/*! 重要註釋 */

5）繼承

sass 中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式

// sass樣式
h1 {
    font-size:20px;
}
div {
    @extend h1;
    color:red;
}
// css編譯後樣式
h1 {
    font-size:20px;
}
div {
    font-size:20px;
    color:red;
}

使用佔位符選擇器 % 

從sass3.2.0後，就能夠定義佔位選擇器%，這個的優點在於，不調用不會有多餘的css文件

// sass樣式
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// css編譯後樣式
div {
    font-size:20px;
    color:red;
}

6）混合(mixin)

 sass中使用@mixin聲明混合，能夠傳遞參數，參數名義$符號開始，多個參數以逗號分開，若是參數有多組值，那麼在變量後面加三個點表示，如： $var...

//sass 樣式
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

.opacity{
  @include opacity;      //參數使用默認值  50/100 = 0.5
}
.opacity-80{
  @include opacity(80); //傳遞參數  80/100 = 0.8
}

//  css編譯後樣式
.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

// ---------------------

// 多參數
@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
    @include center(200px, 100px);
}
// css編譯後樣式
div {
    position: absolute;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin:-50px 0 0 -100px;
}

// -------------------

//多組值
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
div {
    @include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css編譯後樣式
div {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}

@content：在sass3.2.0中引入， 能夠用來解決css3中 @meidia 或者 @keyframes 帶來的問題。它可使@mixin接受一整塊樣式，接收的樣式從@content開始

//sass 樣式               
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css 編譯後樣式
@media only screen and (max-width: 480px) {
  body { color: red }
}

 使用@content解決@keyframes關鍵幀的瀏覽器前綴問題

// 初始化變量
$browser: null;
// 設置關鍵幀
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}

// css編譯後
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}

7）顏色函數

 sass提供了一些內置的顏色函數

lighten(#cc3, 10%)　　  // #d6d65c
darken(#cc3, 10%) 　　　// #a3a329
grayscale(#cc3) 　　　　// #808080
complement(#cc3) 　　　// #33c

8）引入外部文件

使用 @import 命令引入外部文件， 引入後，可以使用外部文件中的變量等。

@import "_base.scss";

5、高級用法

1）函數 function

 sass容許用戶編寫本身的函數，以@function開始

$fontSize: 10px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(16px);
}
// css編譯後樣式
div {
    font-size: 1.6rem;
}

 2）if條件語句

  @if語句能夠用來判斷

// sass樣式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css編譯後樣式
div {
    color: green;
}

三目判斷：語法爲 if($condition, $if_true, $if_false)。 三個參數分別表示： 條件，條件爲真的值，條件爲假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）循環語句

for循環有兩種形式，分別爲：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示變量，start表示開始值，end表示結束值，兩種形式的區別在於 through 包括 end 的值，to 不包括 end 值。

// sass樣式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css編譯後樣式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

 while循環 

// sass樣式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css編譯後樣式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}

@each循環：語法爲@each $var in <list or map>。 其中$var表示變量，而list和map表示數據類型，sass3.3.0新加入多字段循環和map數據循環

單字段list數據循環

//sass 樣式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css 編譯後樣式
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}

 多字段list數據循環

//sass 樣式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css 編譯後樣式
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}

 多字段map數據循環

//sass 樣式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css 編譯後樣式
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

 

6、在線工具

Sass在線編譯工具          在線CSS轉Sass工具

 

參考資料：

大漠博客： Sass入門    &   Sass中國

阮一鋒：　Sass用法指南

Sass官網    &   Sass文檔    &    Sass函數列表  

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程