Sass 學習筆記

lingdududu 發布于2019-08-30 13:20 / 2715人閱讀

摘要：有利于版權等關鍵信息的保留。變量后加上則變為全局變量。字符串運算符根據左邊的字符判斷最終結構是否有引號。若使用，則兩個類必須同時使用，增加維護負擔。一組重用的使用引入，可攜帶參數。

1. 什么是Sass

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

2. Sass的特征

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

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

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

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

Extend共享一組css規則，使css更簡潔；

運算符：方便運算

3. Sass語法 3.1. 嵌套規則

普通嵌套

應用場景：避免重復書寫父元素，讓復雜嵌套書寫更簡單

&指代父元素

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

命名空間：

應用場景：減少background, font這種復合元素分開寫的重復

#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 注釋

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

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

3.3 SassScript

變量

應用場景：多次使用某個值
以$開頭，在某個嵌套內部聲明的變量只能在該內部使用，之外的變量則為全局變量。變量后加上!global則變為全局變量。

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

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

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

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

變量默認值!default：當變量未被賦值時，使用!default的值,!default的值不能重定義；

3.4 @-rules 和指令

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

應用場景：樣式的模塊化；減少Link請求數量

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

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

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

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

@media

應用場景：媒體查詢時不用重復寫選擇器

.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

應用場景：一個類需要另一個類的全部css樣式時。比如bootstrap中的btn, btn-success。若使用html，則兩個類必須同時使用，增加維護負擔。

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

調試：

@debug: 輸出sassScript結果；

@warning: 控制用戶輸入變量等，可用—quiet關掉

@error 輸出錯誤

3.5 條件控制

if(boolean, trueValue, falseValue):

@if：條件滿足時使用樣式，比如導航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可在循環中使用。

@each in list/map

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

@include里的內容會應用在mixing中的@content的位置。

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

3.6 函數

function

@function name (param) {
     @retutn
}

3.7 產出css

—nested: 產出嵌套的css;

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

—compat:一個選擇器一行；

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

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115479.html

學習筆記 - Sass的安裝與使用手冊

摘要：現在將學習筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應用程序和命令行界面。如果已經安裝過，也可以使用指令如果提示權限不足，在命令行前加上即可。參考網頁編輯器的使用的使用很簡單，記住兩條指令即可。最近因為工作需要，自學了Sass。現在將學習筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應用程序（appl...

Jeff 2019-08-29 16:57 評論0 收藏0
sass學習筆記--混合宏

摘要：申明混合宏不帶參數混合宏在中，使用來聲明一個混合宏。如其中是用來聲明混合宏的關鍵詞，有點類似中的一樣。是混合宏的名稱。什么時候使用混合宏如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統一處理，那么這種選擇還是不錯的。但當你的樣式變得越來越復雜，需要重復使用大段的樣式時，使用變量就無法達到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。...

Wildcard 2019-08-29 12:45 評論0 收藏0
SASS 學習筆記

摘要：中的變量以開頭。中的引入文件以下劃線開頭，在其它文件中引用時，用命令即可，引用時不需要帶文件名開頭的下劃線和擴展名。導入本身就提供了導入的選項，這樣就將進一步分割成了代碼更少更容易維護的代碼段，但是在中每一條語句都會產生一次請求。基礎知識這部分內容摘自 Sass Basics。預處理 Preprocessing 預處理功能，就是將 SASS/SCSS 格式的文件輸出為 CSS 文...

?xiaoxiao, 2019-08-30 13:04 評論0 收藏0
SCSS學習筆記（一）

摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發的層疊樣式表語言。年發行，年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。 SCSS的由來 SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Ha...

simpleapples 2019-08-29 16:37 評論0 收藏0
Laravel學習筆記三-前端工作流

摘要：本節將學習是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊，不管該模塊之前是否安裝過由于國內墻的原因，使用安裝會非常緩慢，慢到想切，不過還好，我們可以使用淘寶提供的國內鏡像進行下載。本節將學習 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。一、句法強大的樣式表Sass Sass 是一種可用于編寫CSS的語言...

liuchengxu 2019-06-27 15:14 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 評論0 收藏0