Scss

2019-01-10  本文已影响0人  南方帅

尝试使用Scss,会让你工作效率更高,代码更易管理
Scss 有三大特性:嵌套 混合器 变量

变量

规范变量命名 建议使用-中划线 变量默认值使用!default

$warnning-color: red;
$warnning-border: 1px solid $warning-color;
// !default !important的反义词
$set-width: 400px !default; 

嵌套

.content {
  a {
    &:hover { margin-bottom: 1.4em }
  }
}
// 转换后
.content a:hover {margin-bottom: 1.4em}
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
// 转换后
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav, aside {
  a {color: blue}
}
// 转换后
nav a, aside a {color: blue}
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
// 转换后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
// 转换后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入文件@import

相对css导入文件来说,不会导致额外的下载请求,而且也更模块化和高效。导入文件里面的混合器和变量也可以直接使用

@import
// 引入thems/_night-sky
@import "theme/night-sky" 
aside {
  background: blue;
  color: white;
}

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器 mixin

@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-color:red,
  $hover-color:$normal-color,
  $visited-color:$normal-color
) {
  color: $normal-color;
  &:hover { color: $hover-color; }
  &:visited { color: $visited-color; }
}
a {
  @include link-colors(blue, red, green);
}

继承 @extend

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上边的代码中,.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"。相关元素不仅会拥有一个3px宽的边框,而且这个边框将变成红色的,这个元素同时还会有一个浅红色的背景,因为这些都是在.error里边定义的样式。


引申

关于@mixin@extend 对比
控制命令
@mixin txt($weight) {
    color: white;
    @if $weight == bold { font-weight: bold;}
}

.txt1 {
    @include txt(none);
}

.txt2 {
    @include txt(bold);
}
//转化后
.txt1 {
    color: white;
}

.txt2 {
    color: white;
    font-weight: bold;
}
@mixin txt($weight) {
    color: white;
    @if $weight == bold { font-weight: bold;}
    @else if $weight == light { font-weight: 100;}
    @else if $weight == heavy { font-weight: 900;}
    @else { font-weight: normal;}
}
@for $i from 1 through 4 {
    .col-#{$i} { width: 100/4 * $i + %;}
}
@each $usr in bob, john, bill, mike {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
     }
}
@each $usr in bob, john, bill, mike {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
     }
}
$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );

@each $key, $usr in $ppl  {
    .#{$usr}-avatar {
        background-image: url('/img/#{$usr}.png');
    }
}
$x:1;

@while $x < 13 {
    .col-#{$x} { width: 100/12 * $x;}
    $x: $x + 1;
};
操作符
$list-map: (success: lightgreen, alert: tomato, info: lightblue);

@mixin button-state($btn-state) {
    @if (length($list-map) > 2 or length($list-map) < 5) {
        background-color: map-get($list-map, $btn-state);
    }
}

.btn {
    @include button-state(success);
}
颜色运算 (使用rgba hsl请保证透明通道一致)
color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);
color: #468499 + #204479;
上一篇 下一篇

猜你喜欢

热点阅读