SASS用法

時間 2019-11-29

標籤 sass 用法简体版

原文原文鏈接

SASS用法

CSS是一種樣式設計語言。有人就開始爲CSS加入編程元素，這被叫作"CSS預處理器"（css preprocessor）。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。
本文介紹SASS，以爲它有不少優勢。下面是一些用法總結。css

1、什麼是SASS

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。
本文總結了SASS的主要用法。有了這篇文章，平常的通常使用就不須要去看官方文檔了。html

2、安裝和使用

2.1 安裝

SASS是Ruby語言寫的，因此必須先安裝Ruby，再安裝SASS。Ruby下載地址：https://www.ruby-lang.org/en/downloads/
假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：編程

gem install sass

而後，就可使用了。sass

2.2 使用

SASS文件就是普通的文本文件，裏面能夠直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。
下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲test。）ruby

sass test.scss

若是要將顯示結果保存成文件，後面再跟一個.css文件名。app

sass test.scss test.css

SASS提供四個編譯風格的選項：編程語言

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

生產環境當中，通常使用最後一個選項。函數

sass --style compressed test.sass test.css

你也可讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。工具

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

SASS的官方網站，提供了一個在線轉換器。你能夠在那裏，試運行下面的各類例子。

3、基本用法

3.1 變量

SASS容許使用變量，全部變量以$開頭。

$blue : #1875e7;　
div {
　color : $blue;
}

若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

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

3.2 計算功能

SASS容許在代碼中使用算式：

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

3.3 嵌套

sass的嵌套包括兩種：一種是選擇器的嵌套；另外一種是屬性的嵌套。咱們通常提及或用到的都是選擇器的嵌套。

SASS容許選擇器嵌套。好比，下面的CSS代碼：

.car .bwm {
　　　　color : red;
}

能夠寫成：

.car  {
     .bwm{
           color : red;
     }
}

多人協做時，建議使用，每人寫本身選擇器裏的樣式，不會污染其餘人的樣式。

屬性也能夠嵌套，以下：

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

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

在嵌套的代碼塊內，可使用&引用父元素。好比a:hover僞類，能夠寫成：

a {
　　&:hover { color: #ffb3ff; }
}

3.4 註釋

sass有兩種註釋方式，一種是標準的css註釋方式/* */，另外一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

標準的css註釋

/*
*我是css的標準註釋
*設置body內距
*/
body{
  padding:5px;
}

雙斜杆單行註釋

單行註釋跟JavaScript語言中的註釋同樣，使用又斜槓（//），但單行註釋不會輸入到CSS中。

//我是雙斜槓表示的單行註釋
//設置body內距
body{
  padding:5px; //5px
}

4、代碼的重用

4.1 繼承

sass中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

4.2 Mixin

Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。

sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。

無參數mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有參數mixin

調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。除此以外還能夠選擇性的傳入參數，使用參數名與值同時傳入。

//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

4.3 佔位選擇器%

從sass 3.2.0之後就能夠定義佔位選擇器%。這種選擇器的優點在於：若是不調用則不會有任何多餘的css文件，避免了之前在一些基礎的文件中預約義了不少基礎的樣式，而後實際應用中不論是否使用了@extend去繼承相應的樣式，都會解析出來全部的樣式。佔位選擇器以%標識定義，經過@extend調用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代碼，定義了兩個佔位選擇器%ir和%clearfix，其中%clearfix這個沒有調用，因此解析出來的css樣式也就沒有clearfix部分。佔位選擇器的出現，使css文件更加簡練可控，沒有多餘。因此能夠用其定義一些基礎的樣式文件，而後根據須要調用產生相應的css。
ps：在@media中暫時不能@extend @media外的代碼片斷，之後將會能夠。

4.4 導入文件

sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。可是若是你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。

全部的sass導入文件均可以忽略後綴名.scss。

文件a.scss：

//a.scss
//-------------------------------
body {
  background: #eee;
}

文件b.scss：

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

轉譯出來的b.css樣式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

根據上面的代碼能夠看出，b.scss編譯後，reset.css繼續保持import的方式，而a.scss則被整合進來了。

5、高級用法

5.1 函數

sass定義了不少函數可供使用，固然你也能夠本身定義函數，以@fuction開始。sass的官方函數連接爲：sass fuction，實際項目中咱們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深爲最，其調用方法爲lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

自定義函數
SASS容許用戶編寫本身的函數。

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

5.2 條件判斷

@if判斷
@if可一個條件單獨使用，也能夠和@else結合多條件使用

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

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

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

5.3 循環語句

for循環
for循環有兩種形式，分別爲：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

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

list:list數據可經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。
map:map數據以key和value成對出現，其中value又能夠是list。格式爲：$map: (key1: value1, key2: value2, key3: value3);。可經過map-get($map,$key)取值。關於map數據還有不少其餘函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等。

單個字段list數據循環

//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.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'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

多個字段list數據循環

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.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; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

多個字段map數據循環

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

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

5.4 while循環

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

-------------------------------------------------------------------------------------------------------------------------------------

完

轉載需註明轉載字樣，標註原做者和原博文地址。

http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html

http://www.w3cplus.com/preprocessor/sass-other-function.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。