第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

1. 嵌套輸出方式 nested

2. 展開(kāi)輸出方式 expanded ?

3. 緊湊輸出方式 compact?

4. 壓縮輸出方式 compressed

1、Grunt?配置 Sass 編譯的示例代碼

2、Gulp?配置 Sass 編譯的示例代碼

單文件編譯：sass?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
這是對(duì)一個(gè)單文件進(jìn)行編譯，如果想對(duì)整個(gè)項(xiàng)目所有?Sass?文件編譯成?CSS?文件，可以這樣操作：多文件編譯：sass?sass/:css/

開(kāi)啟“watch”功能，這樣只要你的代碼進(jìn)行任保修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化，并且給你直接編譯出來(lái)：

sass?--watch?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

sass編譯的方法

幾種安裝sass的方法

Sass 和 SCSS 有什么區(qū)別？

Sass 和 SCSS 其實(shí)是同一種東西，我們平時(shí)都稱(chēng)之為 Sass，兩者之間不同之處有以下兩點(diǎn)：

1. 文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名

2. 語(yǔ)法書(shū)寫(xiě)方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書(shū)寫(xiě)和我們的 CSS 語(yǔ)法書(shū)寫(xiě)方式非常類(lèi)似。

先來(lái)看一個(gè)示例：

Sass 語(yǔ)法

$font-stack:?Helvetica,?sans-serif??//定義變量
$primary-color:?#333?//定義變量

body
??font:?100%?$font-stack
??color:?$primary-color

SCSS 語(yǔ)法

$font-stack:?Helvetica,?sans-serif;
$primary-color:?#333;

body?{
??font:?100%?$font-stack;
??color:?$primary-color;}

編譯出來(lái)的 CSS

body?{
??font:?100%?Helvetica,?sans-serif;
??color:?#333;
}

sass用于清晰地、結(jié)構(gòu)化地描述文件樣式，是采用ruby語(yǔ)言編寫(xiě)的一款css預(yù)處理語(yǔ)言

需要傳變量的使用混合宏，不需要傳變量的使用繼承

$col-width: 60px;

$col-gap: 20px;

@for $i from 1 through 12 {

? ? .col-#{$i}{

? ? ? ? width:$col-width*$i+$col-gap*($i - 1);

? ? }

}

/*運(yùn)行結(jié)果結(jié)果*/

.col {

? width: 96px;

}

/*運(yùn)行結(jié)果結(jié)果*/

.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;

? }

}

/*運(yùn)行結(jié)果結(jié)果*/

.icon-twitter {

? background-postion: -20px;

}

.icon-facebook {

? background-postion: -40px;

}

.icon-github {

? background-postion: -60px;

}

.icon-weibo {

? background-postion: -80px;

}

減法運(yùn)算? 減號(hào)兩邊要加 空格

$container: 960px;

$sidebar-width: 220px;

$gap-width: 20px;

.content{

? ? width: $container - $sidebar-width - $gap-width;

? ? float: left;

}

運(yùn)行結(jié)果

.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;

}

運(yùn)行結(jié)果是：

.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;

注意，如果有引號(hào)的字符串被添加了一個(gè)沒(méi)有引號(hào)的字符串 （也就是，帶引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果會(huì)是一個(gè)有引號(hào)的字符串。 同樣的，如果一個(gè)沒(méi)有引號(hào)的字符串被添加了一個(gè)有引號(hào)的字符串 （沒(méi)有引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果將是一個(gè)沒(méi)有引號(hào)的字符串。 例如：

p:before?{
??content:?"Foo?"?+?Bar;
??font-family:?sans-?+?"serif";
}

SassScript 支持 CSS 的兩種字符串類(lèi)型：

• 有引號(hào)字符串 (quoted strings)，如?"Lucida Grande"?、'http://sass-lang.com'；

• 無(wú)引號(hào)字符串 (unquoted strings)，如?sans-serifbold。

在編譯 CSS 文件時(shí)不會(huì)改變其類(lèi)型。只有一種情況例外，使用?#{ }插值語(yǔ)句 (interpolation) 時(shí)，有引號(hào)字符串將被編譯為無(wú)引號(hào)字符串，這樣方便了在混合指令 (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!";?}

需要注意的是：當(dāng) deprecated = property syntax 時(shí) （暫時(shí)不理解是怎樣的情況），所有的字符串都將被編譯為無(wú)引號(hào)字符串，不論是否使用了引號(hào)。

這段代碼沒(méi)有被 @extend 調(diào)用，他并沒(méi)有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個(gè) SCSS 文件中。只有通過(guò) @extend 調(diào)用才會(huì)產(chǎn)生代碼：

//SCSS%mt5?{
??margin-top:?5px;
}%pt5{
??padding-top:?5px;
}

.btn?{??@extend?%mt5;
??@extend?%pt5;}

.block?{??@extend?%mt5;

??span?{????@extend?%pt5;
??}
}

編譯出來(lái)的CSS

//CSS
.btn,?.block?{
??margin-top:?5px;
}

.btn,?.block?span?{
??padding-top:?5px;
}

從編譯出來(lái)的 CSS 代碼可以看出，通過(guò) @extend 調(diào)用的占位符，編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。