SASS用法指南

時間 2019-11-09

標籤 sass 用法指南简体版

原文原文鏈接

光看是沒用的，過不了多久就忘光光，因此仍是記錄一下吧。php

首先windows仍是離不開我，因此仍是環境仍是windows..css

1、SASS環境安裝配置html

SASS是ruby寫的，因此要想將sass編譯成css文件，就給配上ruby環境。git

windows下載裝個 rubyinstaller 就好了，注意要保證配置好環境變量。github

好比 E:\Ruby22-x64\bin 配置到系統環境變量 path中編程

cmd命令行執行 ruby -v 正確則安裝配置正確windows

接下來是使用gem給咱們裝上sass數組

通常的作法是直接sass

gem install sass

但不少時候回報錯，也許是國內網絡太差被封殺了.. 經過 -V 參數能夠看到具體信息ruby

通常來講，淘寶團隊都提供了不少鏡像，去看看~

使用簡單的命令，切換源就行

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 rails

sass安裝成功，先來體驗一下吧~

在sass目錄下新建一個test.scss文件，寫入幾句，直接執行看看。

可以使用 sass test.scss test.css 將scss文件直接編譯成css文件

2、SASS用法：

如上例test.scss文件，我能夠定義編譯後css代碼的風格。

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮後的css代碼。

也能夠直接定義監聽文件的改動，修改scss文件，css將會獲得同步更新

接下來，談談sass的各語法

1.像css那樣，直接定義

div{width:50px;}

2.使用變量，變量有$標識符，若是要定義默認變量值，則在後方加上 !default便可。

若是變量要放在字符串裏頭，就用 #{}包含.可使用計算功能

$width: 500px;
$height: 300px !default;
$side: right;
div{ 
    border-#{$side}-width: $width / 5;
}

  |
  |
  |

div {
  border-right-width: 100px;
}

3.嵌套。sass能夠進行選擇器的嵌套，表示層級關係，看起來很優雅整齊。若是要使用父類，就用&符，如常見的 a:hover

$width: 500px;
div{
    width: $width;
    .answer a{ 
        &:hover{text-decoration:none;}
    }
}

    |
    |
    |

div {
  width: 500px;
}
div .answer a:hover {
  text-decoration: none;
}

4.混入（Mixins). 相似於定義一個宏/函數,而後在須要的地方調用

// *.scss

$width: 500px;
@mixin right($color: '#0f0'){ 
    font-weight: bold;
    color: $color;
}

div{
    width: $width;
    .answer{ 
        @include right();
    }
}

//---------------------------------------
// *.css

div {
  width: 500px;
}
div .answer {
  font-weight: bold;
  color: "#0f0";
}

5.導入其餘scss或css文件 @import , 導入scss文件會自動編譯展開，導入css則原樣置入

//test.scss
$width: 500px;
div{
    width: $width;
    .answer a{ 
        &:hover{text-decoration:none;}
    }
}
@import './test1.css';
@import './test1.scss';
p{width: $width / 10;}

//test1.css
p.new{
    color: red;
}

//test1.scss
$width: 200px;
#nav{ 
    width: $width;
}

//最後，test.css  能夠看到，$width變量的值已經更新
@import url(./test1.css);
div {
  width: 500px;
}
div .answer a:hover {
  text-decoration: none;
}

#nav {
  width: 200px;
}

p {
  width: 20px;
}

6.繼承/擴展使用 @extend

// *.scss
$width: 100px;

.block{ 
    color: #333;
    border-left: 1px;
}
.block-1{ 
    @extend .block;
    width: $width / 2; 
}
.block-2{ 
    @extend .block-1;
    background-color: green;
}

//  *.css
.block, .block-1, .block-2 {
  color: #333;
  border-left: 1px;
}

.block-1, .block-2 {
  width: 50px;
}

.block-2 {
  background-color: green;
}

7.顏色函數，sass內置了許多顏色函數，例如加亮、變暗、顏色梯度等。

如：

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

更多顏色函數

8.其餘比較少用到的方法

1] 變量也能夠有多個值：相似於一個數組

// *.scss
$px : 1px 2px 3px 4px;

div{ 
    border-left: nth($px,2);
}

// *.css
div {
  border-left: 2px;
}

2]能夠用map作key-value關係用@each遍歷（相似於php語法）

// *.scss
$headings : (h1: 12px,h2:13px,h3:14px);
@each $header,$size in $headings{ 
    #{$header}{ 
        font-size: $size;
    }
}

// *.css
h1 {
  font-size: 12px;
}

h2 {
  font-size: 13px;
}

h3 {
  font-size: 14px;
}

3] 跳出選擇器嵌套 @at-root 不過應該不多用到，若是要跳出媒體的嵌套例如 @media .block-1{}的，type就選media|all

語法爲 @at-root (without: type) type有四種：all（全部），rule（常規css，默認），media（media），support（support）

// *.scss
.block-1{ 
    border-left:1px;
    .flw{ 
        color: red;
        @at-root{ 
            .today{ 
                font-size: 14px;
            }
        }
    }
    @at-root .tomo{ 
        font-size: 12px;
    }
}

// *.css
.block-1 {
  border-left: 1px;
}
.block-1 .flw {
  color: red;
}
.today {
  font-size: 14px;
}
.tomo {
  font-size: 12px;
}

4]條件判斷和循環等

// *.scss
$width: 25px;
.block-5{ 
    width: 50px;
}
// 如今不包含4，若是是froms 1 through 4 ,就會包含4
@for $i from 1 to 4{ 
    .block-#{$i}{ 
        @if $i % 2 == 0 { width: $width;}
        @else {width: 50px;}
    }
}

// *.css
.block-5 {
  width: 50px;
}

.block-1 {
  width: 50px;
}

.block-2 {
  width: 25px;
}

.block-3 {
  width: 50px;
}

5]固然了，也能夠定義個函數，而後調用~

逐增width 這css愈來愈像編程了..

// *.scss
$width: 25px;

.block-5{ 
    width: 50px;
}
@function inc($num){ 
    @return $num + 1;
}
@for $i from 1 through 4{ 
    .block-#{$i}{ 
        @if $i % 2 == 0 { 
            $width: inc($width);
            width: $width;
        }
        @else {width: 50px;}
    }
}

// *.css
.block-5 {
  width: 50px;
}

.block-1 {
  width: 50px;
}

.block-2 {
  width: 26px;
}

.block-3 {
  width: 50px;
}

.block-4 {
  width: 27px;
}

附 Sass經常使用函數

字符串函數
unquote($string)：刪除字符串中的引號；
unquote( ) 函數只能刪除字符串最前和最後的引號（雙引號或單引號），而沒法刪除字符串中間的引號。若是字符沒有帶引號，返回的將是字符串自己。

quote($string)：給字符串添加引號。
quote() 函數只能給字符串增長雙引號，並且字符串中間有單引號或者空格時，須要用單引號或雙引號括起，不然編譯的時候將會報錯。
To-upper-case()：函數將字符串小寫字母轉換成大寫字母
To-lower-case()：函數 與 To-upper-case() 恰好相反，將字符串轉換成小寫字母
數字函數
Sass 中的數字函數提要針對數字方面提供一系列的函數功能：

percentage($value)：將一個不帶單位的數轉換成百分比值；
round($value)：將數值四捨五入，轉換成一個最接近的整數；（四捨五入）
ceil($value)：將大於本身的小數轉換成下一位整數；（向上取整）
floor($value)：將一個數去除他的小數部分；（向下取整）
abs($value)：返回一個數的絕對值；（絕對整數）
min($numbers…)：找出幾個數值之間的最小值；（min（1，2，3））
max($numbers…)：找出幾個數值之間的最大值；
random(): 獲取隨機數（random（））
列表函數
列表函數主要包括一些對列表參數的函數使用，主要包括如下幾種：

length($list)：返回一個列表的長度值；===length(border 1px solid)===3
nth($list, $n)：返回一個列表中指定的某個標籤值===nth(border 1px solid,1)===border
join($list1, $list2, [$separator])：將兩個列給鏈接在一塊兒，變成一個列表；===
join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
append($list1, $val, [$separator])：將某個值放在列表的最後；
append(10px 20px ,30px)
(10px 20px 30px)
append((10px,20px),30px)
(10px, 20px, 30px)
append(green,red)
(#008000 #ff0000)
append(red,(green,blue))
(#ff0000 (#008000, #0000ff))
若是沒有明確的指定 $separator 參數值，其默認值是 auto。

若是列表只有一個列表項時，那麼插入進來的值將和原來的值會以空格的方式分隔。

若是列表中列表項是以空格分隔列表項，那麼插入進來的列表項也將以空格分隔；

若是列表中列表項是以逗號分隔列表項，那麼插入進來的列表項也將以逗號分隔。

zip($lists…)：將幾個列表結合成一個多維的列表；（ 每一個單一的列表個數值必須是相同的）
zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
zip()函數中每一個單一列表的值對應的取其相同位置值：

|--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
|------------|--------------|--------------|--------------|
|    List1   |      1px     |      2px     |      3px     |
|------------|--------------|--------------|--------------|
|    List2   |      solid   |      dashed  |     dotted   |
|------------|--------------|--------------|--------------|
|    List3   |      green   |      blue    |      red     |
|------------|--------------|--------------|--------------|
index($list, $value)：返回一個值在列表中的位置值。
index(1px solid red,dotted) //列表中沒有找到 dotted
false
index(1px solid red,solid) //列表中找到 solid 值，而且返回他的位置值 2
2
Introspection函數
Introspection函數包括了幾個判斷型函數：

type-of($value)：返回一個值的類型
返回值：

1. number 爲數值型。
2. string 爲字符串型。
3. bool 爲布爾型。
4. color 爲顏色型。
unit($number)：返回一個值的單位；
碰到複雜的計算時，其能根據運算獲得一個「多單位組合」的值，不過只充許乘、除運算：

但加、減碰到不一樣單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算以外

comparable($number-1, $number-2)：判斷兩個值是否能夠作加、減和合並
Miscellaneous函數
Miscellaneous 函數稱爲三元條件函數，主要由於他和 JavaScript 中的三元判斷很是的類似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另外一種值：

if($condition,$if-true,$if-false)
上面表達式的意思是當 $condition 條件成立時，返回的值爲 $if-true，不然返回的是 $if-false 值。

if(true,1px,2px)
1px
if(false,1px,2px)
2px
顏色函數
RGB顏色函數簡介
RGB 顏色只是顏色中的一種表達式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中爲 RGB 顏色提供六種函數：

`rgb($red,$green,$blue)：根據紅、綠、藍三個值建立一個顏色；
rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值建立一個顏色；
red($color)：從一個顏色中獲取其中紅色值；
green($color)：從一個顏色中獲取其中綠色值；
blue($color)：從一個顏色中獲取其中藍色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一塊兒。[$weight]是合併的比例
HSL函數簡介
hsl($hue,$saturation,$lightness)：經過色相（hue）、飽和度(saturation)和亮度（lightness）的值建立一個顏色；
hsla($hue,$saturation,$lightness,$alpha)：經過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值建立一個顏色；
hue($color)：從一個顏色中獲取色相（hue）值；
saturation($color)：從一個顏色中獲取飽和度（saturation）值；
lightness($color)：從一個顏色中獲取亮度（lightness）值；
adjust-hue($color,$degrees)：經過改變一個顏色的色相值，建立一個新的顏色；
lighten($color,$amount)：經過改變顏色的亮度值，讓顏色變亮，建立一個新的顏色；
darken($color,$amount)：經過改變顏色的亮度值，讓顏色變暗，建立一個新的顏色；
saturate($color,$amount)：經過改變顏色的飽和度值，讓顏色更飽和，從而建立一個新的顏色
desaturate($color,$amount)：經過改變顏色的飽和度值，讓顏色更少的飽和，從而建立出一個新的顏色；
grayscale($color)：將一個顏色變成灰色，至關於desaturate($color,100%);
complement($color)：返回一個補充色，至關於adjust-hue($color,180deg);
invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。
Opacity函數簡介
alpha($color) /opacity($color)：獲取顏色透明度值；
rgba($color, $alpha)：改變顏色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。

View Code

相關標籤/搜索

每日一句

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