the_lower的博客

一. 使用选择器继承来精简CSS选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现//通过选择器继承继承样式.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; //.seriousError将会继承样式表中任何位置处为.error定义的所有样式 border-width: 3px;}.seriousError不仅

二. 混合器当样式变得越来越复杂，需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了，这时可以通过sass的混合器实现大段样式的重用。@mixin rounded-corners { /*定义混合器，目的是添加跨浏览器的圆角边框*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}/*在样式表中通过@include来使用这个混合器，放在你希望的任何地方*/notice {

一. 导入sass文件@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中1.导入局部文件：可省略文件名开头的下划线例如：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”;。2.默认变量值;一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：$link-color: blue;$link-color: red;a {

一. $声明变量$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