Sass學習筆記
阿新 • • 發佈：2018-03-06
default 縮進 基本 陰影 查詢 n) ali fault 生效
參考《Sass入門篇》《側欄工具條開發》強烈推薦後者，良心課程。
Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：
文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而 SCSS 是以“.scss”後綴為擴展名 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
安裝
安裝ruby brew install ruby
安裝 sass sudo gem install sass
更新 gem update sass
卸載 gem uninstall sass
編譯 sass source.scss:target.css
實時編譯 sass --watch source.scss:target.css
多文件編譯 sass sourceDir/:targetDir/
輸出風格：
嵌套輸出方式 nested sass --watch test.scss:test.css --style nested
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed
語法
語法比較多 只寫幾條看起來常用的吧。
1. 註釋
// 單行註釋 在css中不可用 所以轉換成css也不會顯示這些註釋 /*多行註釋 在css中可用*/
2. 變量
// 聲明 全局變量 $variableName: variableValue; selector { // 局部變量 會覆蓋全局變量 $variableName: variableValue; // 使用變量 label: $variableName; } // !default 如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。 $variableName: variableValue !default; // 全局變量 $variableName: variableValue !global; // 一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用。 //應用於class和屬性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; }
3. 嵌套
/* 選擇器嵌套 */ nav a { color:red; } header nav a { color:green; } /** 用scss表示 */ nav { a { color: red; header & { // & 表示當前選擇器 color:green; } } } /* 屬性嵌套 */ .box { border-top: 1px solid red; border-bottom: 1px solid green; } /** 在 Sass 中我們可以這樣寫：*/ .box { border: { top: 1px solid red; bottom: 1px solid green; } } /* 偽類/偽元素 嵌套 */ .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } &:hover { ... } }
4. 混合宏 @mixin @include
用法和C語言的宏基本類似。可以帶參數。
/* 定義宏 */ /* 不帶參數 */ @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } /* 帶參數 */ @mixin center($width,$height){ width: $width; height: $height; } /* ...可以表示所有參數 */ /*當 $shadow 的參數數量值大於或等於“ 1 ”時，表示有多個陰影值，反之調用默認的參數值“ 0 0 4px rgba(0,0,0,.3) ”。*/ @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } } /* 調用宏 */ button { @include border-radius; } .box-center { @include center(500px,300px); }
5. 繼承 @include & 占位符 %
繼承一個類的所有屬性
.btn { border: 1px solid #ccc; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; /* 相當於把btn的樣式全部都挪過來 */ /* 或者是其實是在.btn 選擇器那裏添加當前選擇器 .btn ,.btn-primary */ } /* 只有被@extend調用時才生效 */ %mt5 { margin-top: 5px; } %pt5 { padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; }
6. 數學運算
可以直接在屬性值的地方使用數學運算符
$width: 15px; .button { width: $width; height: $width * 2; }
7. 引入文件 @import
@import "foo.scss"; @import "foo"; // 兩者都將引入 foo.scss 文件
可以在文件名前加下劃線如 _colors.scss 防止生成.css文件，引入時通過 @import "colors"; 就可以引入，所以在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。
如果文件的擴展名是 .css。 如果文件名以 http:// 開頭。 如果文件名是 url()。 如果 @import 包含了任何媒體查詢（media queries）。它會被編譯成 CSS 的 @import 規則。
也可以通過一個 @import 引入多個文件。 @import "rounded-corners", "text-shadow";
實例
項目目錄
_style.scss，fonts是下載的字體文件（https://icomoon.io/app/#/select）
沒想過寫個CSS也要寫這麽多註釋。。。
_mixin.scss
// 設置過渡的屬性 時間 @mixin transition($transition) { -webkit-transition: $transition; -moz-transition: $transition; -ms-transition: $transition; -o-transition: $transition; transition: $transition; } // 設置轉換時 以哪個點為基準點做變換 @mixin transform-origin($origin) { -webkit-transform-origin: $origin; -moz-transform-origin: $origin; -ms-transform-origin: $origin; -o-transform-origin: $origin; transform-origin: $origin; } // 設置縮放 @mixin scale($origin) { -webkit-transform: scale($origin); -moz-transform: scale($origin); -ms-transform: scale($origin); -o-transform: scale($origin); transform: scale($origin); } // 設置透明度 @mixin opacity($opcity) { opacity: $opcity; filter: alpha(opacity=$opcity * 100); }
index.scss
@import "mixin"; @import "style"; $toolbar-size: 50px; .toolbar { position: fixed; // 固定定位 right: 10px; bottom: 10px; } .toolbar-item { position: relative; // 子代使用absulote定位 所以這裏要設置relative定位 display: block; // 因為a標簽是內聯元素 默認不能設置寬高 margin-top: 1px; // 幾個小方塊的間距為1px width: $toolbar-size; height: $toolbar-size; &:after { content: ‘‘; position: absolute; right: $toolbar-size; bottom: 0; width: 300px; height: 300px; background-repeat: no-repeat; white-space: pre; @include opacity(0); @include scale(0.01); @include transition(all 1s); @include transform-origin(95% 95%); } &:hover { // 當鼠標經過的時候 要向上移動顯示文字說明 .toolbar-btn { &:before { top: -$toolbar-size; } &:after { top: 0; } } &:after { @include opacity(1); // 設置透明度變為完全不透明 @include scale(1); // 設置大小變為100% } } } .toolbar-item-qq { &:after { background-image: url(../img/qq.png); width: 180px; height: 180px; } .toolbar-btn { @extend .icon-qq; // 繼承字體樣式 將 before 元素變為字體圖標 &:before { color: #26b8f2; } &:after { content: ‘加我\AQQ‘; // \A 表示換行 } } } .toolbar-item-pay { &:after { background-image: url(../img/pay.png); } .toolbar-btn { @extend .icon-paypal; // 繼承字體樣式 將 before 元素變為字體圖標 &:before { color: #f3281b; } &:after { content: ‘為我\A捐款‘; // \A 表示換行 } } } .toolbar-item-wechat { &:after { content: "\A不告\A訴你"; color: #fff; font-size: 20px; line-height: 1.2; text-align: center; background-color: #000; width: 100px; height: 100px; } .toolbar-btn { @extend .icon-wechat; // 繼承字體樣式 將 before 元素變為字體圖標 &:before { color: #46b942; } &:after { content: ‘加我\A微信‘; // \A 表示換行 } } } .toolbar-item-cool { .toolbar-btn { @extend .icon-cool; // 繼承字體樣式 將 before 元素變為字體圖標 &:before { color: #000; } &:after { content: ‘我最\A可愛‘; // \A 表示換行 } } } .toolbar-btn { &, &:before, &:after { width: $toolbar-size; height: $toolbar-size; position: absolute; left: 0; } top: 0; overflow: hidden; // 讓文字默認位於溢出位置 然後將溢出部分隱藏 @extend [class^="icon-"]; // 繼承字體的樣式 &:before, &:after { content: ‘‘; color: #fff; text-align: center; @include transition(top 1s); } &:before { // 默認的圖標顯示 top: 0; background-color: #d0d6d9; font-size: 30px; line-height: $toolbar-size; } &:after { // 鼠標懸浮時的文字顯示 top: $toolbar-size; background-color: #98a1a6; font-size: 12px; padding-top: 12px; line-height: 1.2; white-space: pre; // 為了實現文字換行 } }
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="toolbar"> <a href="javascript:;" class="toolbar-item toolbar-item-qq"> <span class="toolbar-btn"> <!-- 用 before 元素表示默認顯示 --> <!-- 用 after 元素表示鼠標經過顯示 --> </span> </a> <a href="javascript:;" class="toolbar-item toolbar-item-pay"> <span class="toolbar-btn"></span> </a> <a href="javascript:;" class="toolbar-item toolbar-item-wechat"> <span class="toolbar-btn"></span> </a> <a href="javascript:;" class="toolbar-item toolbar-item-cool"> <span class="toolbar-btn"></span> </a> </div> </body> </html>
顯示效果：
鼠標懸浮-->
Sass學習筆記