Sass 學(xué)習(xí)筆記

lingdududu 發(fā)布于2019-08-30 13:20 / 2724人閱讀

摘要：有利于版權(quán)等關(guān)鍵信息的保留。變量后加上則變?yōu)槿肿兞俊Ｗ址\算符根據(jù)左邊的字符判斷最終結(jié)構(gòu)是否有引號。若使用，則兩個類必須同時使用，增加維護(hù)負(fù)擔(dān)。一組重用的使用引入，可攜帶參數(shù)。

1. 什么是Sass

css預(yù)處理器，幫助你書寫更簡單、可維持的css。

2. Sass的特征

變量（variable）幫助你存儲需要重復(fù)使用的值；

嵌套（nesting）讓你書寫更少的選擇器；

partials(_base.scss) 和@import讓你的CSS更加模塊化，并且編譯為一個css文件，減少http請求；

Mixin 讓你創(chuàng)建一組可重復(fù)使用的CSS聲明，每次使用只需要@inclue，并且可使用變量自定義值；

Extend共享一組css規(guī)則，使css更簡潔；

運算符：方便運算

3. Sass語法 3.1. 嵌套規(guī)則

普通嵌套

應(yīng)用場景：避免重復(fù)書寫父元素，讓復(fù)雜嵌套書寫更簡單

&指代父元素

應(yīng)用場景：父元素有其他用法
比如偽類；在其他元素有class時給父元素樣式

命名空間：

應(yīng)用場景： 減少background, font這種復(fù)合元素分開寫的重復(fù)

#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; }

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
    &-sidebar { border: 1px solid; }
}

===========&指代父元素==========================

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
a-sidebar { border: 1px solid; }

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

============命名空間==========================

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

3.2 注釋

/* */為多行注釋;//單行注釋。多行注釋在輸出時會保留，單行注釋不會。

多行注釋以!開頭，即使在壓縮模式下也會被保留。有利于版權(quán)等關(guān)鍵信息的保留。

3.3 SassScript

變量

應(yīng)用場景： 多次使用某個值
以$開頭，在某個嵌套內(nèi)部聲明的變量只能在該內(nèi)部使用，之外的變量則為全局變量。變量后加上!global則變?yōu)槿肿兞俊?/p>

數(shù)據(jù)類型
1.數(shù)字、字符串（有無“”）、顏色、布爾值、null、list（用空格或都好隔開）， map(鍵值對)

2.#{}內(nèi)的字符串解析時會去掉引號；
3.nth(list/map, index)獲取第幾項，從1開始；
4.join(list1, list2, seperator)：合并為一個新的list
5.append(list1, list2, seperator)：返回新的list

運算符
1./：在作為變量、函數(shù)、不是list的括號內(nèi)、與其他運算符一起時進(jìn)行除法運算，其余情況作為普通的css.

2.-：作為減法，盡量兩邊有空格，負(fù)號運算符在前面有空格，作為list最好用括號包圍。
3.顏色運算符：分段運算(# 01|02|03)，對于透明度，有opacity(color, alpha), transparentize(color, alpha)。
4.字符串運算符：根據(jù)左邊的字符判斷最終結(jié)構(gòu)是否有引號。
5.布爾運算符（and, or, not）
6.list不支持運算符，請使用函數(shù)

變量默認(rèn)值!default：當(dāng)變量未被賦值時，使用!default的值,!default的值不能重定義；

3.4 @-rules 和指令

@import: 引入其他文件。并且會將引入的文件也編譯到最后的文件中。import文件中的變量,mixin也可在主文件中使用。

應(yīng)用場景：樣式的模塊化；減少Link請求數(shù)量

=== example.sass ====
.example {
  color: red;
}    

=== main.sass === 
#main {
  @import "example";
}

==== compiled to ====
#main .example {
  color: red;
}

- 引入多個文件
`@import ‘base’, ‘test’`

@media

應(yīng)用場景：媒體查詢時不用重復(fù)寫選擇器

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
=== Compiled to  === 
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

==== Compiled to ===
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
=== Compiled to ===
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

在不同的選擇器中寫同一套媒體查詢怎么解決？
什么時候用#{}, 什么時候用變量？

@extend

應(yīng)用場景：一個類需要另一個類的全部css樣式時。比如bootstrap中的btn, btn-success。若使用html，則兩個類必須同時使用，增加維護(hù)負(fù)擔(dān)。

@at-root：讓嵌套里的元素，使用在文件最外層。打破嵌套規(guī)則。@at-root(with/widthout)讓元素在指令之外。

調(diào)試：

@debug: 輸出sassScript結(jié)果；

@warning: 控制用戶輸入變量等，可用—quiet關(guān)掉

@error 輸出錯誤

3.5 條件控制

if(boolean, trueValue, falseValue):

@if：條件滿足時使用樣式，比如導(dǎo)航active就colour：green；

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

@for $i from start to/through end:through包括end, to不包括，$i可在循環(huán)中使用。

@each in list/map

@mixin一組重用的css, 使用@include引入，可攜帶參數(shù)。

@include里的內(nèi)容會應(yīng)用在mixing中的@content的位置。

@content中的變量只在@content的中塊中使用，否則解析為全局變量

3.6 函數(shù)

function

@function name (param) {
     @retutn
}

3.7 產(chǎn)出css

—nested: 產(chǎn)出嵌套的css;

—expanded:常寫的css，無嵌套;

—compat:一個選擇器一行；

—compressed:所有的都寫在一行；

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115479.html

發(fā)表評論

登陸后可評論

0條評論

lingdududu

男|高級講師

我要關(guān)注我要私信

TA的文章

anaconda安裝tensorflow和keras

閱讀 1531·2023-04-25 17:41
開課吧Python全棧工程師培養(yǎng)計劃

閱讀 3054·2021-11-22 15:08
程序猿能有多執(zhí)著

閱讀 851·2021-09-29 09:35
阿里云智能物聯(lián)網(wǎng)解決方案宣講會助力天津東麗臨空經(jīng)濟(jì)區(qū)數(shù)字騰飛

閱讀 1615·2021-09-27 13:35
RackNerd：cPanel面板虛擬主機(jī)$9.98/年起，可選洛杉磯/德國/法國機(jī)房

閱讀 3336·2021-08-31 09:44
Sass 學(xué)習(xí)筆記

閱讀 2725·2019-08-30 13:20
CSS魔法堂：重拾Border之——解構(gòu)Border

閱讀 1946·2019-08-30 13:00
當(dāng)大多數(shù)人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

閱讀 2568·2019-08-26 12:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Sass 學(xué)習(xí)筆記

相關(guān)文章

學(xué)習(xí)筆記 - Sass的安裝與使用手冊