-
a{ &:hover{ color:blue; } } /*頁面主體內容樣式*/ .main-sec{ font-family: $main-sec-ff; .headline { font-family: $mian-sec-ff; font-size:16px; } .detail { font-size: 12px; } } 【屬性嵌套】 .headline{ font: { family: $main-sec-ff; size: 16px; } }查看全部
-
【局部文件用_開頭】 /* * CONTENTS * * SETTINGS * variables………………………變量集中存儲文件 * mixin……………………………mixin集中存儲文件 * * TOOLS * * COMPONENTS * reset……………………………Compass內置瀏覽器重置樣式文件 * * BUSINESS * * * BASE * screen.scss…………………針對當前站點主頁的樣式修飾 * */查看全部
-
【css中原生@import指令2大弊端】 1.放在代碼最前邊 2.對性能不利 【使用css原生@import的既定規則】 1.當@import后邊跟的文件名是以.css結尾時; 2.當@import后邊跟的是 http://開頭的字符串時; 3.當@import后邊跟的是一個url()函數時; 4.當@import后邊帶有media queries時 @import "variables"; @import"compass/reset" ^ @import "variables", "compass/reset"; 【基于sass的既定規則】 1. 沒有文件后綴名時,sass會添加.scss或.sass的后綴。 2.同一目錄下,局部文件和非局部文件不能重名。查看全部
-
變量操作: 1.直接操作變量,即變量表達式。 2.通過函數。 2.1 跟代碼塊無關的函數,多是自己內置函數,稱functions 2.2 可重用的代碼塊,稱mixin @ include方式調用 @ extend方式調用查看全部
-
22:59:04 goodluck 2016/3/25 22:59:04 p{ height: ( 500px /2); //計算可帶單位,用相同單位 color: hsl( 270, 100%, 50%); //360度色盤度數,飽和度,明度 } sass的function(用的很少) 網址:http://sass-lang.com/documentation/Sass/Script/Functions.html查看全部
-
_mixin.scss @mixin col-6 { width:50%; float:left; } @mixin col ($width: 50%) {//默認參數為50% width: $width; float:left; } screen.scss中調用_mixin.scss .webdemo-sec{ @include col();//不傳參 &:hover { background-color: #f5f5f5; } } .webdemo-sec{ @include col(25%);//傳參 &:hover { background-color: #f5f5f5; } }查看全部
-
mixin指令 名字 參數 @mixin name (params) { //此處是內容 }查看全部
-
extent兩個知識點: 1.不可以繼承選擇器序列 2.使用%,用來構建只用來繼承的選擇器查看全部
-
只用來繼承的類 %error{color:red;} .serious-error{ @extend %error; border:1px #f00; }查看全部
-
compass compile compass watch查看全部
-
gem install compass查看全部
-
sass main.scss main.css查看全部
-
gem install sass --version=3.3查看全部
-
sass 函數演示查看全部
-
mixin 參數校驗查看全部
舉報
0/150
提交
取消