-
選擇器嵌套為樣式表的作者提供了一個通過局部選擇器相互嵌套實現(xiàn)全局選擇的方法,Sass 的嵌套分為三種:
選擇器嵌套
屬性嵌套
偽類嵌套
查看全部 -
只有滿足所有下述標(biāo)準(zhǔn)時方可創(chuàng)建新變量:
該值至少重復(fù)出現(xiàn)了兩次;
該值至少可能會被更新一次;
該值所有的表現(xiàn)都與變量有關(guān)(非巧合)。
查看全部 -
!global 和 !default 對于定義變量都是很有幫助的。
查看全部 -
sass 的默認(rèn)變量一般是用來設(shè)置默認(rèn)值,然后根據(jù)需求來覆蓋的,覆蓋的方式也很簡單,只需要在默認(rèn)變量之前重新聲明下變量即可。
?$baseLineHeight:?2; $baseLineHeight:?1.5?!default; body{ ????line-height:?$baseLineHeight;? }
編譯后的css代碼:
body{ ????line-height:2; }
可以看出現(xiàn)在編譯后的 line-height 為 2,而不是我們默認(rèn)的 1.5。默認(rèn)變量的價值在進行組件化開發(fā)的時候會非常有用。查看全部 -
來看一個簡單的示例,假設(shè)你的按鈕顏色可以給其聲明幾個變量:
$brand-primary?:?darken(#428bca,?6.5%)?!default;?//?#337ab7$btn-primary-color?:?#fff?!default;$btn-primary-bg?:?$brand-primary?!default;$btn-primary-border?:?darken($btn-primary-bg,?5%)?!default;
如果值后面加上!default則表示默認(rèn)值。
查看全部 -
調(diào)試
在 Sass3.3 版本之上(我測試使用的版本是 3.4.7),不需要添加這個參數(shù)也可以:
sass?--watch?style.scss:style.css
查看全部 -
在 Sass 中編譯出來的樣式風(fēng)格也可以按不同的樣式風(fēng)格顯示。其主要包括以下幾種樣式風(fēng)格:
嵌套輸出方式 nested
展開輸出方式 expanded ?
緊湊輸出方式 compact?
壓縮輸出方式 compressed
查看全部 -
另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。
查看全部 -
開啟“watch”功能,這樣只要你的代碼進行任保修改,都能自動監(jiān)測到代碼的變化,并且給你直接編譯出來:
sass?--watch?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
查看全部 -
單文件編譯:
sass?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
這是對一個單文件進行編譯,如果想對整個項目所有 Sass 文件編譯成 CSS 文件,可以這樣操作:
多文件編譯:
sass?sass/:css/
上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件,并且將這些 CSS 文件都放在項目中“css”文件夾中。
查看全部 -
Sass 的編譯有多種方法:
命令編譯
GUI工具編譯
自動化編譯
查看全部 -
//Welcome to imooc learning Sass
$red-color:red;
.box{
? ? color:$red-color;
}
查看全部 -
//welcome to imooc learn Sass
$width:200px;
$height:300px;
body{
? ?width:$width;
? ?height:$height;
}
Sass是之前的版本?現(xiàn)在叫SCSS,所以它們是一樣的東西
查看全部 -
如果進行乘法運算時,兩個值單位相同時,只需要為一個數(shù)值提供單位即可
查看全部 -
使用?#{ }插值語句 (interpolation) 時,有引號字符串將被編譯為無引號字符串,這樣方便了在混合指令 (mixin) 中引用選擇器名。
查看全部
舉報