菜鳥的 Sass 學習筆記

介紹

sass 是什麼？？ 在sass的官網，它是這麼形容給本身的

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass 是世界上最成熟穩定強大的css擴展語言。

sass並非一種編程語言，可是咱們能夠用於開發網頁樣式，你能夠稱它爲css預處理器。用sass來寫css,而後再編譯成正常的css文件。

 

css兼容：Sass與全部版本的CSS徹底兼容。

功能豐富：Sass擁有比任何其餘CSS擴展語言更多的功能和能力。

成熟：Sass由其熱愛的核心團隊積極支持十多年。

社區：Sass由幾家科技公司和數百名開發商的聯盟積極支持和開發。

構架：有無數的框架與Sass創建。 Compass, Bourbon,  Susy 等等。

 

安裝

先安裝Ruby,再安裝sass →gem install sass 

更詳細的安裝→http://sass-lang.com/install

 

學習記錄

1.變量

對於一個項目好比說像主要的顏色，或者說全部border的樣式，這些比較重要的信息或者是在項目中重複使用的，在sass可使用$來定義變量。

若是遇到忽然項目整一個的border的顏色要改變，那麼咱們直接修改定義的變量border的顏色就能夠了。

例：

//定義變量
$primary-border:1px solid #eee;
$primary-color:#488aff;

//使用變量
.test{
  border: $primary-border;
  color: $primary-color;
}

//編譯結果
.test {
  border: 1px solid #eee;
  color: #488aff;
}

2.嵌套

sass容許css規則彼此嵌套，它具備明確的嵌套和可視化層次結構。可是請注意過分的嵌套會致使後期難以維護。

例如:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

編譯後：

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

引用父選擇器

使用&來替代父選擇器，&必須在複合選擇器的開頭，甚至能夠跟一個被添加到父選擇器的後綴

例：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
  &-sidebar {
  border: 1px solid; 
  }
}

編譯後：

#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}
#main-sidebar {
  border: 1px solid;
}

嵌套屬性

好比font-family，font-size和font-weight都在font命名空間,若是在同一個命名空間設置不少它的屬性，挺麻煩的，sass提供這樣的方式，只要寫一次命名空間，而後嵌套他的每一個子屬性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

屬性名稱空間自己還能夠有一個值

例如：

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

編譯後：

.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

 3.註釋

Sass支持標準的多行CSS註釋/* */以及單行註釋//。多行註釋編譯後仍然保留，而單行註釋編譯後就被刪掉了。

例

/* 我是
 * 多行
 * 註釋
 */
//我是我是我是單行註釋
body {
  color: black; }

編譯後：

/* 我是
 * 多行
 * 註釋
 */
body {
  color: black;
}

若是是很重要的註釋，即便是壓縮模式編譯後也存在/*加一個感嘆號

/*！
 * 超級重要註釋
 */

在註釋中也可使用變量

$version: "1.0.0";
/* 版本號 #{$version}. */

編譯後

/* 版本號 1.0.0. */

 

4.Import

假設如今有兩個sass文件，bass.scss和_part.scss,能夠將_part.scss導入到bass.scss中。

然而導入的但是css文件，http:// 或者是url()

好比：

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也能夠一個import導入多個

@import "rounded-corners", "text-shadow";

這是一個示例：

_part.scss

ul,
ol {
  margin:  0;
  padding: 0;
}

base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import嵌套導入

例如如今有一個這個example.sass文件裏面有如下內容

.example {
  color: red;
}

導入example

#main {
  @import "example";
}

編譯結果

#main .example {
  color: red;
}

5.Mixin

咱們使用@mixin定義一個代碼塊，而後用@include調用這個代碼塊。

@mixin border{
  border:1px solid #ee;
}

div{
  @include border
}

編譯後：

div {
  border: 1px solid #ee;
}

還能夠指定參數

@mixin border($color:#eee){
  border:1px solid $color;
}
div{
  @include border(#eee);
}

6.顏色

顏色值支持全部算術運算

p {
  color: #010203 + #040506;
}

計算01 + 04 = 05，，02 + 05 = 07和03 + 06 = 09，並編譯爲：

p {
  color: #050709; }

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

//編譯爲：
p {
  color: rgba(255, 255, 0, 0.75); }

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

hsl（$ hue，$ saturation，$ lightness）：從色調，飽和度和亮度值建立顏色。

hsla（$ hue，$ saturation，$ lightness，$ alpha）：從色調，飽和度，亮度和Alpha值建立顏色。

還有更多的關於內置的顏色函數能夠看這裏 →http://sass-lang.com/documentation/Sass/Script/Functions.html

7.繼承@extend

sass容許一個選擇器去繼承另一個選擇器.

.test1 {border: 1px solid #eee;}
.test2 {@extend .test1;color:white;}

編譯後

.test1, .test2 {
  border: 1px solid #eee;
}

.test2 {
  color: white;
}

8.@debug @warn @error

@debug和@warn，指令將SassScript表達式的值打印到標準錯誤輸出流，它有助於調試。

@warn "這是一個警告";
@error "這是一個錯誤"
@debug "這是一個調試輸出"

輸出

WARM:這是一個警告
ERROR:這是一個錯誤
DEBUG:這是一個調試輸出

9.控制指令和表達式

sass支持基本的控制指令和表達式控制，指令是高級功能，下來來介紹一下。

@if()

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

編譯後

p {
  border: 1px solid; }

@if聲明能夠跟着幾個@else，@if語句和一個@else語句。若是@if語句失敗，@else if則會按順序嘗試這些語句。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

編譯後

p {
  color: green; }

@for

該@for指令重複輸出一組樣式。對於每次重複，使用計數器變量來調整輸出。

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

編譯後

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each

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

編譯後

.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");
}

@while

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

編譯後

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

10.功能指令#function

能夠在sass中定義本身的函數，並在任何值或腳本上下文中使用它們。注意避免函數命名同樣致使衝突了。

例如：

//定義變量
$grid-width: 40px;
$gutter-width: 10px;

//自定義函數
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

//使用
#sidebar { width: grid-width(5); }

//編譯結果
#sidebar {
  width: 240px;
}

 

編譯

sass編譯輸出的默認CSS樣式，能夠執行-style命令行來選擇四種不一樣的輸出樣式

:nested

nested樣式是默認的Sass樣式，由於它反映了CSS樣式的結構和他們所設計的HTML文檔。每一個屬性都有本身的行，但縮進不是常量。根據嵌套的深度，每一個規則都是縮進的。嵌套樣式在查看大型CSS文件時很是有用：它可讓您輕鬆掌握文件的結構，而無需實際讀取任何內容。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

:expanded

expanded是一個更典型的人造CSS風格，每一個屬性和規則佔一線。屬性在規則中縮進，可是規則不以任何特殊方式縮進。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

:compact

compact採用比嵌套或擴展更少的空間。它還將重點放在選擇器上而不是他們的屬性。每一個CSS規則僅佔用一行，每行都在該行上定義。嵌套規則彼此相鄰，沒有換行符，而單獨的規則組在它們之間具備換行符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

:compressed

compressed樣式佔用儘量少的空間，除了分隔選擇器和文件末尾的換行符以外，沒有空格。它還包括一些其餘輕微的按壓，例如選擇最小的顏色表示。這並不意味着人的可讀性。

#main{color:#fff;background-color:#000}#main p{width:10em}

 

ps:

sass 官網 →http://sass-lang.com/

sass github →https://github.com/sass

sass一個在線將sass編譯爲css的網站 →https://www.sassmeister.com/

 

此隨筆乃本人學習記錄，若有疑問歡迎在下面評論，轉載請標明出處。

若是對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。