![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
sass
the_lower
这个作者很懒,什么都没留下…
展开
-
sass入门(四)
一. 使用选择器继承来精简CSS 选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现 //通过选择器继承继承样式 .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; //.seriousError将会继承样式表中任何位置处为.error定义的所有样式 border-width: 3px; } .seriousError不仅原创 2020-07-18 17:09:15 · 123 阅读 · 0 评论 -
sass入门(三)
二. 混合器 当样式变得越来越复杂,需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了,这时可以通过sass的混合器实现大段样式的重用。 @mixin rounded-corners { /*定义混合器,目的是添加跨浏览器的圆角边框*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /*在样式表中通过@include来使用这个混合器,放在你希望的任何地方*/ notice {原创 2020-07-18 16:43:42 · 82 阅读 · 0 评论 -
sass入门(二)
一. 导入sass文件 @import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中 1.导入局部文件:可省略文件名开头的下划线 例如:你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import “themes/night-sky”;。 2.默认变量值; 一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值。举例说明: $link-color: blue; $link-color: red; a {原创 2020-07-18 16:13:32 · 77 阅读 · 0 评论 -
sass入门(一)
一. $声明变量 $nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } //编译后 nav { width: 100px; color: #F90; } $highlight-color: #F90; .selected { border: 1px solid $highlight-color; } //编译后 .selected { border: 1px solid #F原创 2020-07-17 18:28:19 · 241 阅读 · 0 评论