Sass

pcChao 發布于2019-08-22 15:01 / 1822人閱讀

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。

sass介紹

?    SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。
?    SASS的本質是一種幫助你簡化CSS工作流程的方式，幫助你更容易的維護和開發CSS內容。
    環境搭建及編譯指令
?    在 Windows 平臺下安裝 Ruby 需要先有 Ruby 安裝包，大家可以到 Ruby 的官網（http://rubyinstaller.org/downloads）下載對應需要的 Ruby 版本。

?    Ruby 安裝文件下載好后，可以按應用軟件安裝步驟進行安裝 Ruby。在安裝過程中，個人建議將其安裝在 C 盤下，在安裝過程中選擇第二個選項（不選中，就會出現編譯時找不到Ruby環境的情況），如下圖所示：
 
?    Ruby 安裝完成后，在開始菜單中找到新安裝的 Ruby，并啟動 Ruby 的 Command 控制面板，如下圖所示： 
?    當你的電腦中安裝好 Ruby 之后，接下來就可以安裝 Sass 了。同樣的在windows下安裝 Sass 有多種方法。但這幾種方法都是非常的簡單，只需要在你的命令終端輸入一行命令即可。

? 通過命令安裝 Sass

打開電腦的命令終端，輸入下面的命令：gem install sass ? 提醒一下，在使用 Mac
，可能需要在上面的命令前加上"sudo"，才能正常安裝：

  sudo gem install sass ?    如果不能正常安裝sass?  ?    gem sources --remove https://rubygems.org/  ?    gem sources -a

https://ruby.taobao.org/[如果你系統不支持https,請將淘寶源更換成：gem sources -a
http://gems.ruby-china.org ] ? gem sources -l ? gem install sass
? 檢測Sass ? sass -v ? 升級sass版本的命令行為 ? gem update sass ? 卸載（刪除）sass
: gem uninstall sass ? 基本用法 ? sass提供四個編譯風格的選項： ? nested :
嵌套縮進的css代碼，它是默認值 ? expanded:沒有縮進的、擴展的css代碼 ? compact:簡潔格式的css代碼
? compressed:壓縮后的css代碼

sass導入

?    Css本身包含一個指令@import,但是CSS中的@import每次執行都會發送一次新的請求都會消耗一定的資源

SASS中擴展了這個指令，會將包含的編譯成一個CSS文件，切割成小的部分（partials）包含進來進行處理。
Partials這樣的文件，命名規范是以下劃線開頭的，這樣的SCSS文件不會被編譯成CSS文件。
Partials是用來定義公共樣式或者組件的樣式的，專門用于被其他的SCSS文件import進行使用的.

sass嵌套

?    Sass 中還提供了選擇器嵌套功能，但這也并不意味著你在 Sass 中的嵌套是無節制的，因為你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深，這往往是大家不愿意看到的一點。這個特性現在正被眾多開發者濫用。
?    選擇器嵌套為樣式表的作者提供了一個通過局部選擇器相互嵌套實現全局選擇的方法，Sass 的嵌套分為三種：
    ?    選擇器嵌套
    ?    屬性嵌套
    ?    偽類嵌套(了解)
    ?    選擇器嵌套

sass變量定義

? SASS中的變量，必須是$符號開頭，后面緊跟變量名，變量名稱和變量值之間要使用冒號：進行分隔（參考CSS屬性和值的設定語法），如果值后面加上[!default]就表示默認值。
引用變量的值，直接使用變量名稱，即可引用定義的變量的值。
? 普通變量：定義之后可以在全局范圍內使用
? 默認變量：sass的默認變量需要在值的后面加上!default進行標識? 默認變量的覆蓋：在默認變量前后，重新聲明變量并賦值即可
? 默認變量是基于組件化開發的過程中，進行優化處理的
? 特殊變量：一般情況下，我們定義的變量都是屬性值，可以直接使用，但是如果變量作為屬性或者其他的特殊情況下，必須使用#{$variable}的形式進行調用。
? #{$varialbe}就是取值的一種特殊形式，符合特殊用法。
?

sass判斷語句

? @if指令是SASS中的一個控制指令，用于在表達式滿足條件(true)的時候輸出指定的樣式，在不滿足條件（false）或者表達式為null的情況下輸出其他的樣式
@if條件{

     //當條件為真時執行的樣式

}
同樣，也可以通過@else if 和@else 指令結合，進行多條件的判斷
*

? sass數組/map（了解）

*
? list表示列表類型的值
在CSS中就是表示屬性的一串值
列表中的值可以使用空格或者逗號分隔，如
? border:#ccc solid 1px;值就是列表
? font – family:Courier , “Lucide Console”,monospace;值也是列表
? 列表中可以包含其他的列表，如：
? padding(10px 5px) (5px 5px);可以用括號分開，編譯成css時會去掉這些括號
? map就是列表項目中帶名稱的列表
? $map : (key1 : value1,key2:value2,key3:value3)
? $var (key1:value1,key2:value2..):聲明一個Map
? length($map):獲取map中的元素對個數
? map-get($map,key):獲取$map中名稱為key的值
? map-keys($map):獲取指定$map中所有的key
? map-values($map):獲取指定$map中所有的value
? map-has-key($map,key):判斷在$map中是否包含指定的key
? map-merge($map1,$map2):將$map1和$map2合并在一起
? map-remove($map,key):將指定名稱的key從$map中移除

? sass循環語句*

? @for指令在SASS中用于重復處理一組指令
? 有兩種表現形式
? @for $var from <開始值> through < 結束值>
? @for $var from to
? to和throuch都是表示一個區間，唯一的區別就是停止循環的地方不一樣。$var可以是任意一個變量名稱如$i，和是SASS表達式并且必須是整數
? @each在SASS中主要被用來進行列表或者映射數據的循環
? 主要表示形式：@each $var in
? $var可以是任意變量名稱，是SASS表達式并且必須是list.
? sass-mixin函數(宏)
? sass中可以通過@mixin聲明混合，可以傳遞參數，參數名稱以$開始，多個參數之間使用逗號分隔，@mixin的混合代碼塊由@include來調用.
? sass-function介紹
? 函數的功能主要是數據的運算，SASS中可以將一些值交給函數進行處理，具體的處理方式由定義的函數具體的設計確定。
? @function 函數名稱（參數列表）{

    //數據處理

}

sass繼承

? SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：
　　.class1 {
　　　　border: 1px solid #ffffd;
　　}
class2要繼承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

<--------------------------------------end---------------------------------------------->

GPU云服務器云服務器 sass 多云管理 sass sass 混合云部署 iaas paas sass

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

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

CSS 強化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評論0 收藏0
sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉成樣式。最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。 ? SASS的本...

StonePanda 2019-08-30 14:04 評論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。 ? SASS的本...

alexnevsky 2019-08-01 18:40 評論0 收藏0
[Sass]-Sass入門

摘要：未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數，參數名以符號開始，多個參數以逗號分開，也可以給參數設置默認值。初識Sass SASS簡介 sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，然后再編譯成正常的CSS文件。Sass是CSS3的擴展，它增加了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

godiscoder 2019-08-29 13:27 評論0 收藏0