sass05 數據類型,數據運算
阿新 • • 發佈:2017-06-13
spa span 第一個 content res 雙引號 最好 containe col
/*! 數字類型 */ $n1: 1.2; $n2: 12; $n3: 14px; p{ font-size: $n3; } /*! 字符串類型*/ $s1: container; $s2: ‘container‘; $s3: "container"; .#{$s3}{ font-size: $n3; } /*! Bool類型*/ $bt: ture; $bf: false; /*! Null類型*/ $null: null; body{ @if $null == null{ color: red; } } /*! 顏色類型*/ $c1: blue; $c2: #fff; $c3: rgba(255,255,0,0.5); body{ color: $c3; } $width1: 10px; $width2: 15px; /*== !=所有數據類型都支持,<,>,<=,>=僅僅支持數字類型,*/ span{ width: $width1 - $width2; //空格隔開,不隔開會報錯 } a:hover{ cursor: e + -resize; //e-resize是標準做法 } a:before{ content: "A" + bc;//"Abc",第一個有單引號雙引號結果就有單引號雙引號 } a:before{ content: A + ‘bc‘;// Abc,第一個沒有單引號雙引號結果就沒有單引號雙引號} p{ padding: 3px + 4px auto; } $version: 3; p:before{ content: ‘Hello,Sass #{$version}‘; } p{ font: 20px / 10px; //運算符最好空格隔開 width: $width2 / 2; width: round($width2) / 2; height: (100px / 2); //不寫小括號不能運算 }
@charset "UTF-8"; /*! 數字類型 */ /* line 6, ../sass/demo1.scss */ p { font-size: 14px; } /*! 字符串類型*/ /* line 15, ../sass/demo1.scss */ .container { font-size: 14px; } /*! Bool類型*/ /*! Null類型*/ /* line 26, ../sass/demo1.scss */ body { color: red; } /*! 顏色類型*/ /* line 37, ../sass/demo1.scss */ body { color: rgba(255, 255, 0, 0.5); } /* line 44, ../sass/demo1.scss */ span { width: -5px; } /* line 48, ../sass/demo1.scss */ a:hover { cursor: e-resize; } /* line 52, ../sass/demo1.scss */ a:before { content: "Abc"; } /* line 55, ../sass/demo1.scss */ a:before { content: Abc; } /* line 59, ../sass/demo1.scss */ p { padding: 7px auto; } /* line 63, ../sass/demo1.scss */ p:before { content: "Hello,Sass 3"; } /* line 67, ../sass/demo1.scss */ p { font: 20px / 10px; width: 7.5px; width: 7.5px; height: 50px; }
sass05 數據類型,數據運算