-
項目文件夾分類查看全部
-
sass中的@media跟css的區別： ·sass@media可以內嵌在css規則中 ·最后編譯后會被提取到樣式的最高級別 好處：避免重復書寫選擇器和打亂樣式表 @mixin col-sm($width:50%){ @if type-of($width)!=number{ @error "$width必須是一個數值類型，你輸入的width是： #{($width)}"; } @if not unitless($width){//sass的內置函數，判斷輸入的數值是否有單位 @if unit($width) != "%"{ @error "$width必須是一個百分值，你輸入的width是： #{($width)}"; } }@else{ @warn "$width應該是一個百分值，你輸入的width是: #{$width}."; $width:percentage(($width)/100); @media(min-width:768px){ width:$width; float:left; } } 可以運用@at-root使樣式表查看全部
-
類名一定要有語義化的意義而不光是為了視覺上的效果不全 可以利用mixin定義函數，并在調用時進行傳參 @mixin col($width){ width:$width; float:left; } .webdemo-sec{ @include col(25%); &:hover{ background-color:#f5f5f5; } } ================編譯結果 .webdemo sec{ width:50%; float:left; } .webdemo-sec:hover{ background-color:#f5f5f5; } 1、extend繼承多個選擇器，但不可以繼承選擇器系列。.A .B{} 2、連續繼承,使用%，構成僅用來繼承的選擇器查看全部
-
變量操作： 1、直接操作變量，即變量表達式 2、通過函數 { ·跟代碼塊無關的函數，多為內置函數functions ·可重用的代碼塊，成為mixin{ @include方式調用（以復制拷貝方式存在的） @extend方式調用，（以組合聲明存在的） } }查看全部
-
將.scss文件轉換成.sass文件：sass-convert main.scss main.sass 1、局部變量抽離到外部的局部文件內（'_'開頭文件可以避免被編譯），使用import語句導入 //聲明變量使用$ $headline-ff:[font-family]; //引用變量: .selector{ font-family:$headline-ff; } 2、sass的嵌套語法 parent_class { child_class{ ... } } a { &:hover{ color:blur; } }//使用&父類選擇器將父類引入，并樣式輸出到父類上。否則這個：hover樣式將應用到a標簽的所有內容上 3、sass提供了屬性的嵌套 .headline{ font:{ //注意!這里font(屬性)后的冒號不可去掉 family: sans-serif, size: 16px; } }查看全部
-
css中原生的@import指令的兩大弊端： 1、必須放在html代碼最前面 2、如果有一個文件 有鏈接，就會先去下載鏈接的文件，會造成網絡堵塞對性能不利 Sass重新定義了import文件， ·在編譯文件時將被引用文件合并 ·import可以在文檔的任何位置 @import "compass/reset";//normalize:注重通用的方案，重置該重置的，保留有用的樣式，進行一些bug修復，統一跨瀏覽器的默認樣式差異，比如統一<p>標簽的樣式 sass支持css的注釋語法 // /**/，會在編譯好的css文件中輸出 /* * CONTENTS * *SETTING *variables。。。。。。。變量幾種存儲的文件 * *TOOLS *reset。。。。。。。。。Compass內置瀏覽器重置樣式文件 * *BUSINESS * *BASE *screen.scss。。。。。。。。針對當前站點主頁的樣式修飾 */查看全部
-
·ruby環境中命令行安裝compass -- gem install compass ·創建compass的工作空間 -- mkdir workspace ·進入工作空間創建項目-- compass create learn-compass-init+項目名 { 1、以_開頭的文件為局部文件，主要用來被其他的樣式文件引入，在編譯的時候不會單獨的被編譯成CSS文件 2、在Sass改變的視乎，必須編譯成css才能生效 2-1：按需編譯compass compile 2-2：自動編譯 compass watch }查看全部
-
Sass&Compass ·自動化css ·在項目周期內更好阻止項目內容查看全部
-
font:{ family:arial; size:16px }查看全部
-
@at-root{這里的樣式將被提升到最外層，以提高樣式渲染效率}查看全部
-
@extend %a; 樣式類a只會用于繼承，本身不會被解析到css中查看全部
-
@extend 不能繼承嵌套的樣式查看全部
-
gem sources -a https://gems.ruby-china.org/ gem install sass gem install sass --version=3.3.0 gem uninstalled sass-3.3.0 gem list查看全部
-
不建議的寫法查看全部
-
css模塊化查看全部
舉報
0/150
提交
取消