其他分享
首页 > 其他分享> > sass基本使用整理

sass基本使用整理

作者:互联网

1、使用变量(使用$符号标识变量)比如$highlight-color $name: foo; $attr: border; p.#{$name} {   #{$attr}-color: blue; } 2、嵌套css规则    dl > {      dt { color: #333 }      dd { color: #555 }    } 3、嵌套属性 nav {   border: 1px solid #ccc {       left: 0px;       right: 0px;   } } 4、导入sass样式文件 5、混合器 @mixin rounded-corners {   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px; } notice {   background-color: green;   border: 2px solid #00aa00;   @include rounded-corners; } @mixin no-bullets {   list-style: none;   li {     list-style-image: none;     list-style-type: none;     margin-left: 0px;   } } ul.plain {   color: #444;   @include no-bullets; } ul.plain {   color: #444;   list-style: none; } ul.plain li {   list-style-image: none;   list-style-type: none;   margin-left: 0px; } @mixin link-colors($normal, $hover, $visited) {   color: $normal;   &:hover { color: $hover; }   &:visited { color: $visited; } } a {   @include link-colors(blue, red, green); } a { color: blue; } a:hover { color: red; } a:visited { color: green; } @mixin link-colors(     $normal,     $hover: $normal,     $visited: $normal ){   color: $normal;   &:hover { color: $hover; }   &:visited { color: $visited; } } 6、选择器继承 //通过选择器继承继承样式 .error {   border: 1px solid red;   background-color: #fdd; } .seriousError {   @extend .error;   border-width: 3px; }    

标签:基本,style,hover,sass,color,整理,visited,border,选择器
来源: https://www.cnblogs.com/liangtang/p/16139040.html