1盼理、什么是CSS預(yù)處理器辅愿,什么是Sass?
(1)用一種專門的編程語言智亮,進(jìn)行網(wǎng)頁樣式設(shè)計(jì),然后再編譯成正常的CSS文件点待,這被叫做“CSS預(yù)編譯處理器”
? (2)SASS就是其中一種阔蛉,CSS開發(fā)工具,提供了許多便利的寫法癞埠,大大節(jié)省了設(shè)計(jì)者的時(shí)間状原,使 ? 得CSS開發(fā),變得簡單和可維護(hù)苗踪。
2颠区、scss的使用
? ? ? a、新建一個(gè)項(xiàng)目的css目錄 在里面新建***.scss文件
? ? ? b通铲、將css目錄拖到考拉中 進(jìn)行編譯 會自動的聲稱一個(gè)***.css文件
? ? ? ?c毕莱、在html中引入***.css文件
? ?3、Sass與SCSS有什么區(qū)別颅夺?
? ? ?(1) sass后綴名為sass央串,是sass的老式語法,不使用大括號和分號進(jìn)行縮進(jìn)碗啄;
? ? ? (2)scss后綴名為scss,使用大括號和分號進(jìn)行縮進(jìn)质和,是sass的新式語法。
? ? ? (3)建議使用后綴名為scss的文件稚字,以避免sass后綴名的嚴(yán)格格式要求報(bào)錯饲宿。
?4、Sass/SCSS和純CSS對比胆描?
? ? ? ?CSS沒有語句瘫想,無法編程,只是單純的描述昌讲。
5国夜、scss中的嵌套(選擇器)?
? ? ? css3中關(guān)系選擇器
? ? ? > 子類選擇器
? ? ? 空格 ?后代選擇器
? ? ? + ? 緊鄰的下一個(gè)兄弟
? ? ?~ ?后代的所有兄弟
6、輸出方式(四種編譯風(fēng)格)
? ? ?nested:嵌套縮進(jìn)的css代碼短绸,它是默認(rèn)值车吹。
? ? expanded:沒有縮進(jìn)的筹裕、擴(kuò)展的css代碼。
? ? compact:簡潔格式的css代碼窄驹。
? ?compressed:壓縮后的css代碼朝卒。
7、普通變量與默認(rèn)變量
? ? 普通變量:$變量名:值;
? ? 默認(rèn)變量:$變量名:值 乐埠!default;
8抗斤、局部變量和全局變量
? ? ?全局變量:$變量名: 值!Global;
9、嵌套:
? ?選擇器嵌套
? ? 屬性嵌套
? ? ?偽類嵌套
10丈咐、Sass語法格式
? ? ? 繼承
? ? ? ?語法:
? ? ? ? ? .繼承名{
? ? ? ? ? ? ? ? ? ? ? ?公共代碼瑞眼;
? ? ? ? ? ? ? }
引用:@extend ?.繼承名;
占位符
? ? ? ?語法:
? ? ? ?%繼承名{
? ? ? ? ? ? ? ? ? 公共代碼棵逊;
? ? ? ? ? ? }
引用:@extend? %繼承名负拟;
混合宏(類似于自定義函數(shù))
? ? ? ? ? ?語法:
? ? ? ? ? ?@mixin混合名(形式參數(shù)列表){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 代碼;
? ? ? ? ? ? ? ? ? ? ? }
引用:@include混合名(實(shí)際參數(shù)列表)
11歹河、Sass的基本特性-運(yùn)算
? ?1、加減乘除法運(yùn)算
? ?2花吟、變量計(jì)算
? ?3秸歧、數(shù)字運(yùn)算
? ?4、顏色運(yùn)算
? ?5衅澈、字符運(yùn)算