Sass學習

Sass學習

介紹

Sass 有兩種語法規則(syntaxes),目前新的語法規則(從 Sass 3開始)被稱為 “SCSS”( 時髦的css(Sassy CSS)),它是css3語法的的拓展級,就是說每一個語法正確的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作為拓展名。第二種語法別成為縮進語法(或者 Sass),它受到了Haml的簡潔精煉的啟發,它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號,分號,它使用 行縮進 的方式來指定css 塊,雖然sass不是最原始的語法,但是縮進語法將繼續被支持,在縮進語法的文件以 .sass 為拓展名。

安裝

1.安裝rvm

<pre>
1.安裝rvm$ curl -L get.rvm.io | bash -s stable
2.裝載rvm$ source ~/.rvm/scripts/rvm
3.安裝2.3.0版本ruby$ rvm install 2.3.0
4.將2.3.0設為默認$ rvm use 2.3.0 --default
rvm -v 驗證是否安裝成功
</pre>

2.利用rvm安裝ruby

<code>
sudo rvm install ruby
</code>

3.安裝sass

<pre>
sudo gem install sass

sass -v 測試是否安裝成功
</pre>

4.webStorm配置

在設置頁面中,選擇Preferences -> Tools -> File Watcher 配置

基礎

0.注釋

有三種形式:

(1)//comment:該注釋只是在.scss源文件中有,編譯后的css文件中沒有。

(2)/! /:重要注釋,任何style的css文件中都會有,一般放置css文件版權說明等信息。

(3)/ /:該注釋在compressed的style的css中沒有,其他style的css文件都會含有。

1.變量

變量的定義一般以$開頭:$name,某個變量的作用域僅限于他們定義的層級以及子層級。

1.1局部變量

sass中局部變量定義與其他語言定義一樣,比如:
<pre>
body {
$color:red;
color:$color;
}
</pre>

編譯以后:
<pre>
body {
color: red;
}
</pre>

1.2全局變量

如果希望某個在子選擇器中定義的變量能夠成為全局變量,可以使用!global關鍵字
<pre>
body {
$color:red !global;
color:$color;
}
</pre>

1.3變量默認值

如果想給定義的變量初始化默認值,可以使用!default關鍵字
<pre>
$color:red !default;
</pre>

1.4 多值變量

多值變量分為兩種形式: 數組和字典

數組:

<pre>
$paddings:5px 10px 5px 10px;
通過nth取其中的某一個值:nth($paddings,1):取padding的第一個值
</pre>

字典:
<pre>
$maps:(color:red, borderColor:blue);
可以通過map_get($maps,boderColor)獲取其中某一個key值
</pre>

1.5變量特殊用法

嵌套引用在其他編程語言中即是字符串插值,需要用#{}進行包裹
<pre>
$left:left;
.div1{
border-#{$left}-width:5px;
}
</pre>

在變量定義中,下劃線與橫線相同,比如:
$text_info === $text-info

2.文件導入

在sass中,定義文件以下劃線 “_” 開頭 代表部分文件,不會編譯出css,這為了表面生成多余css
比如:定義 _part.scss
其中導入使用 @import 'part'

如何區分原生css導入

被導入文件名字以.css結尾

被導入文件是以URL地址

被導入的文件是css的url()值

3.嵌套

3.1選擇器嵌套

<pre>
body{
header {
color: red;
}
}
</pre>
編譯后結果:
<pre>
body header {
color: red;
}
</pre>

3.2屬性嵌套

<pre>
body{
header {
color: red;
}
footer {
background: {
color: green;
size: 20%;
};
}
}
</pre>
編譯后結果:
<pre>
body footer {
background-color: green;
background-size: 20%; }
</pre>

3.3引用父選擇器 &

<pre>
body{
a {
color: red;
&:hover{
color: green;
}
}
}
</pre>

編譯后的結果:
<pre>
body a {
color: red; }
body a:hover {
color: green; }
</pre>

3.4 @at-root ,跳出嵌套
  • 默認@at-root只會跳出選擇器嵌套,而不能跳出@media 或 @support;
  • 若要跳出,則需要@at-root(without:media) | @at-root(without:support)
  • 其中還有:all 表示所有 ; rule表示常規css

<pre>
body{

header {
    color: red;

    @at-root .container {
        width: 100px;
    }
}
footer {
    background: {
        color: green;
        size: 20%;
    };


}

}
</pre>

編譯后的結果:
<pre>
body header {
color: red; }
.container {
width: 100px; }
body footer {
background-color: green;
background-size: 20%; }
</pre>

3.5 @at-root 與 &混用

<pre>
.text-info {
color: red;
@at-root nav &{
color: blue;
}
}
</pre>

編譯后結果:
<pre>
.text-info {
color: red; }
nav .text-info {
color: blue; }
</pre>

4.繼承

4.1簡單繼承

<pre>
.A{
background-color: red;
}
.A1 {
@extend .A;
color: red;
}
</pre>

<pre>
.A, .A1 {
background-color: red; }
.A1 {
color: red; }
</pre>

4.2多繼承

在簡單基礎上,類似于@entend .A,.B;

4.3鏈型繼承

<pre>
.one {
color: red;
}
.two {
@extend .one;
size: 100px;
}
.three{
@extend .two;
border-radius: 10px;
}
</pre>

<pre>
.one, .two, .three {
color: red; }

.two, .three {
size: 100px; }

.three {
border-radius: 10px; }
</pre>

4.4繼承局限性
  • 包含選擇器 或者 相鄰兄弟選擇器 不支持
  • 如果繼承元素是a,恰巧這個元素a又有hover狀態的形式,那么狀態hover也會被繼承
    <pre>
    a :hover{
    color: red;
    }

.four {
@extend a;
}

</pre>

<pre>
a :hover, .four :hover {
color: red; }

</pre>

4.5繼承交叉合并

沒有在同一父級下,會產生交叉編譯結果
<pre>
.five a{
color: red;
}

.six {
@extend a;
}
</pre>

<pre>
.five a, .five .six {
color: red; }
</pre>

4.6繼承的作用域

繼承在指令中是有作用域問題的,繼承是無法使在指令如(@media)之外的選擇器繼承的,要是繼承就只能寫在指令中

4.7特別--占位選擇器%

有時候你想繼承一個類名,但是并不想再在HTML中使用,就單單想寫一個能夠繼承的類名。尤其是不想讓它出現在css樣式中。我們可以用占位符來寫一些繼承的樣式(如“%one”),然后再通過@extend繼承,這樣就可以防止被渲染到CSS的規則集中。

<pre>
.B a%long {
color: red;
}
.C {
@extend %long;
}
</pre>

<pre>
.B a.C {
color: red; }
</pre>

5.進階

5.1 數據類型

Sass涉及到的數據類型有以下幾個:
Number,String,List,Map,Color,Boolean,Null

以上類型基本在實例中見過,不多介紹了,另外存在一些函數查看文檔就可以了

5.2變量操作

和其他語言基本類似,不多介紹了

5.3 Mixin

@mixin的調用方式是@include,@include產生的樣式是以復制拷貝的方式存在的,而@extend產生的樣式是以組合申明的方式存在的
<pre>
@mixin count($color1:red){
color: color1;
}

body{
@include count(#fff)
}

有點#define的趕腳
</pre>
<pre>
body {
color: #fff; }
</pre>

如何設置多值參數呢?
<pre>
@mixin count($color1...){
color: color1;
}
</pre>

@content應用:
<pre>
@mixin header{ #header{ @content; } }
</pre>
<pre>
@include header{ width:1000px; height:200px; .logo{ width:200px; } }
</pre>

5.4函數

<pre>
@function double($width){
@return $width * 2;
}
</pre>

  • @debug,@error,@warn
    用來調試
5.5條件控制

條件關鍵字如下,沒有什么特別的
@if

@for

@while

@each

參考文檔

1.Sass文檔

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 什么是SASS SASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變...
    陳小陌丿閱讀 485評論 0 0
  • 安裝運行 1.下載ruby并安裝 2.安裝之后打開命令行執行gem命令,檢查是否已經安裝好 安裝完ruby之后,在...
    wshining閱讀 735評論 0 1
  • 一、Sass安裝(windows版) 1.在 Windows 平臺下安裝 Ruby 需要先有 Ruby 安裝包,可...
    July_EF閱讀 734評論 0 0
  • 我來自于廣東省廉江的一個小村,1988年出生在一個兄弟姐妹多(1個哥哥四個姐姐)的大家庭,我是排行老六,聽說長得胖...
    阿琪艾芘基妮閱讀 130評論 0 0
  • 不可否認,現代人遇到的一個普遍問題是每天的事情太多,忙碌了一整天,臨睡時盤點發現總是做不完,于是第二天,帶著一顆焦...
    小秘來了閱讀 481評論 0 5