Scss精讲
1. 什么是SCSS?
2. SCSS的基本使用
npm install -g sass
npm install css-loader style-loader --save-dev npm install node-sass sass-loader --save-dev
<style lang = "scss"> </style>
3. SCSS入门及使用技巧
3.1 使用变量 $
$colorA : red; $colorB : green; $colorC : blue; $fontA : 12px; $fontB : 14px; $fontC : 16px;
color:$colorA; font-size: $fontA;
$path : './primary/assets/img/'; $logo : $path + 'logo.png'; $icon-A : $path + 'icon-A.png';
3.2 嵌套规则
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } }
a { font-weight: bold; text-decoration: none; a:hover { text-decoration: underline; } }
li { float:left; >a { display:inline-block; padding:10px; } }
p { font: { family: fantasy; size: 30px; weight: bold; } }
p { font-family: fantasy; font-size: 30px; font-weight: bold; }
3.3 导入SCSS文件
@import "./base.scss"
3.4 注释
body { color: black; } // 这是超链接颜色 a { color: green; }
body { color: black; } a { color: green; }
3.5 插值语句
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }
p.foo { border-color: blue; }
@mixin content($class) { .#{$class} { position: relative; background-color: #fff; overflow: hidden; } }
3.6混合器(函数)
@mixin position($pos:absolute,$top:0,$left:0,$w:100%,$h:100%){ position:$pos; top:$top; left:$left; width:$w; height:$h; }
@include position(relative,100px,100px);
3.7 @extend 继承
.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
%border-style { border:1px solid #eee; border-radius: 5px; } .container { @extend %border-style; }
3.8 运算的使用
p { font: 10px/8px; }
p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; }
p { width: 1px + (2px * 3); }
p { color: #010203 * 2; }
版权声明:
作者:wuhou123
链接:https://wuhou.fun/349.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论