Sass基本特性
2018-06-24 02:00:18来源:未知 阅读 ()
Sass扩展/继承@extend
代码的继承,声明方式:.class;调用方式:@extend 如:
.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; }
编译出来的 CSS::
.btn, .btn-primary { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; }
从示例代码可以看出,在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:
[Sass]占位符 %placeholder
Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能。声明方式:%placeholder;调用方式:@extend;
可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。如:
%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }
这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码。如:
//SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }
编译出来的CSS:
/*CSS*/ .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }
[Sass]混合宏 VS 继承 VS 占位符
a) 混合宏
缺点:编译出来的 CSS不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。
优点:可以传参数。如果代码块中涉及到变量,建议使用混合宏。
b) Sass继承
优点:编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现如:.mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是 CSSer 期望看到。
缺点:不能传变量参数。
c) 占位符
编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。
占位符和继承的主要区别,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”
[Sass]插值 #{}
1:混合宏中使用插值,插值只能出现在混合宏下属性名内(也就是:的左边),不能出现在属性值内(也就是:右边)。 存疑 4-17
2:继承中使用插值似乎可以很好的解决其不能传参的缺陷。那么是不是“继承+占位符+插值” 就是完美搭配组合了呢?
@mixin generate-sizes($class, $small, $medium, $big) { .#{$class}-small { font-size: $small; } .#{$class}-medium { font-size: $medium; } .#{$class}-big { font-size: $big; } } @include generate-sizes("header-text", 12px, 20px, 40px);
编译出来的CSS:
.header-text-small { font-size: 12px; } .header-text-medium { font-size: 20px; } .header-text-big { font-size: 40px; }
[Sass运算]加法减法
对于携带不同类型的单位时,在 Sass 中计算会报错,单位必须相同。
[Sass运算]乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:
.box { width:10px * 2px; }
编译的时候报“20px*px isn't a valid CSS value.”错误信息。
如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。上面的示例可以修改成:
.box { width: 10px * 2; }
编译出来的 CSS:
.box { width: 20px; }
[Sass运算]除法
”/ ”符号被当作除法运算符时有以下几种情况:
? 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
? 如果数值被圆括号包围。
? 如果数值是另一个数学表达式的一部分。
//SCSS p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 1000px; width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; // 使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算 margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 }
编译出来的CSS:
p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }
Sass 的除法运算还有一个情况。在乘法运算时,如果两个值带有相同单位时,做乘法运算时,出来的结果并不是我们需要的结果。但在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。如下所示:
.box { width: (1000px / 100px); }
编译出来的CSS如下:
.box { width: 10; }
[Sass运算]字符运算
在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如:
$content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; }
编译出来的CSS:
.box:before { content: " Hello Sass! "; }
除了在变量中做字符连接运算之外,还可以直接通过 +,把字符连接在一起:
div { cursor: e + -resize; }
编译出来的CSS:
div { cursor: e-resize; }
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }
编译出来的 CSS:
p:before { content: "Foo Bar"; font-family: sans-serif; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:vue2.0生命周期好文章推荐
下一篇:前端【响应式】开发详细解析
- 前端工程师需要具备哪些基本素质? 2020-04-11
- HTML连载81-CSS书写格式、一个手机页面的基本结构 2020-04-09
- css基本选择器 2020-04-07
- sass内置函数 2020-03-29
- sass常见的基本数据类型+加减乘除基本运算 2020-03-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash