-
嵌套輸出方式 nested
展開輸出方式 expanded ?
緊湊輸出方式 compact?
壓縮輸出方式 compressed
查看全部 -
1、Grunt?配置 Sass 編譯的示例代碼
2、Gulp?配置 Sass 編譯的示例代碼
查看全部 -
單文件編譯：sass?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css 這是對一個單文件進行編譯，如果想對整個項目所有?Sass?文件編譯成?CSS?文件，可以這樣操作：多文件編譯：sass?sass/:css/
開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且給你直接編譯出來：
sass?--watch?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
查看全部 -
sass編譯的方法
查看全部 -
幾種安裝sass的方法
查看全部 -
Sass 和 SCSS 有什么區別？
Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：
文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例：
Sass 語法
$font-stack:?Helvetica,?sans-serif??//定義變量 $primary-color:?#333?//定義變量 body ??font:?100%?$font-stack ??color:?$primary-color
SCSS 語法
$font-stack:?Helvetica,?sans-serif; $primary-color:?#333; body?{ ??font:?100%?$font-stack; ??color:?$primary-color;}編譯出來的 CSS
body?{ ??font:?100%?Helvetica,?sans-serif; ??color:?#333; }查看全部 -
sass用于清晰地、結構化地描述文件樣式，是采用ruby語言編寫的一款css預處理語言
查看全部 -
需要傳變量的使用混合宏，不需要傳變量的使用繼承
查看全部 -
$col-width: 60px;
$col-gap: 20px;
@for $i from 1 through 12 {
? ? .col-#{$i}{
? ? ? ? width:$col-width*$i+$col-gap*($i - 1);
? ? }
}
/*運行結果結果*/
.col {
? width: 96px;
}
/*運行結果結果*/
.col-1 {
? width: 60px;
}
.col-2 {
? width: 140px;
}
.col-3 {
? width: 220px;
}
.col-4 {
? width: 300px;
}
.col-5 {
? width: 380px;
}
.col-6 {
? width: 460px;
}
.col-7 {
? width: 540px;
}
.col-8 {
? width: 620px;
}
.col-9 {
? width: 700px;
}
.col-10 {
? width: 780px;
}
.col-11 {
? width: 860px;
}
.col-12 {
? width: 940px;
}
查看全部 -
$list: twitter,facebook,github,weibo;
@for $i from 1 through length($list){
? .icon-#{nth($list,$i)}{
? ? background-postion: 0 - 20px * $i;
? }
}
/*運行結果結果*/
.icon-twitter {
? background-postion: -20px;
}
.icon-facebook {
? background-postion: -40px;
}
.icon-github {
? background-postion: -60px;
}
.icon-weibo {
? background-postion: -80px;
}
查看全部 -
減法運算? 減號兩邊要加 空格
$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;
.content{
? ? width: $container - $sidebar-width - $gap-width;
? ? float: left;
}
運行結果
.content {
? width: 720px;
? float: left;
}
查看全部 -
$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;
.container {
? ? width: $sidebar-width+$content-width+$gap-width;
? ? margin: 0 auto;
}
運行結果是：
.container {
? width: 960px;
? margin: 0 auto;
}
in是英寸。8in即8英寸。1英寸約=2.54厘米,1英寸大約是96像素width:20px+8in;8in=8*96px?=?768px即width=20px?+?768px?=?788px;查看全部 -
注意，如果有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 例如：
p:before?{ ??content:?"Foo?"?+?Bar; ??font-family:?sans-?+?"serif"; }查看全部 -
SassScript 支持 CSS 的兩種字符串類型：
有引號字符串 (quoted strings)，如?"Lucida Grande"?、'http://sass-lang.com'；
無引號字符串 (unquoted strings)，如?sans-serifbold。
在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用?#{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。
@mixin?firefox-message($selector)?{ ??body.firefox?#{$selector}:before?{ ????content:?"Hi,?Firefox?users!"; ??} } @include?firefox-message(".header");編譯為：
body.firefox?.header:before?{ ??content:?"Hi,?Firefox?users!";?}需要注意的是：當 deprecated = property syntax 時 （暫時不理解是怎樣的情況），所有的字符串都將被編譯為無引號字符串，不論是否使用了引號。
查看全部 -
這段代碼沒有被 @extend 調用，他并沒有產生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調用才會產生代碼：
//SCSS%mt5?{ ??margin-top:?5px; }%pt5{ ??padding-top:?5px; } .btn?{??@extend?%mt5; ??@extend?%pt5;} .block?{??@extend?%mt5; ??span?{????@extend?%pt5; ??} }編譯出來的CSS
//CSS .btn,?.block?{ ??margin-top:?5px; } .btn,?.block?span?{ ??padding-top:?5px; }從編譯出來的 CSS 代碼可以看出，通過 @extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。
查看全部
舉報