快速上手 sass
❝快乐周末，快乐学习鸭。
❞
intro
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
- 安装
sass npm install sass -g - 使用
sass input.scss ouput.css - 监听
sass --watch input.scss:output.css - 监听目录编译
sass --watch sass:css❝
css 目录里面的样式文件可以实时生成了，建议使用这种方式边编写边查看
❞
数据类型
- 数字，
1, 2, 13, 10px - 字符串，有引号字符串与无引号字符串，
"foo", 'bar', baz - 颜色，
blue, #04a3f9, rgba(255,0,0,0.5) - 布尔型，
true, false - 空值，
null - 数组 (list)，用空格或逗号作分隔符，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif - maps, 相当于
JavaScript的object，(key1: value1, key2: value2)
嵌套
.box {
position: realtive;
.title {
@extend .title;
height: 25px;
background-color: #fff;
line-height: 25px;
}
.container {
....
}
.footer {
}
}
变量 $
$fs-xs:12px !global; //sass变量具有块级作用域 可以使用!global转换为全局变量
.box {
font-size:$fs-xs;
}
混入@mixin
// & 表示嵌套外层的父级选择器
@mixin clearfix {
display: inline-block;
&:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
.float {
@include clearfix;
}
控制指令
@mixin border($n) {
@if $n == 1 { border: 1px solid; }
@if $n == 2 { border: 2px dotted; }
@if $n == 3 { border: 3px double; }
}
@for $i from 1 through 3 {
.p-#{$i} { padding: 10px * $i; }
}
@each $var in (left,center,right) {
.text-#{$var} {
text-align: $var;
}
}
继承 @extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编写一个自己的通用样式库
有了上面的基础我们可以很方便的编写一个自己的通用样式啦
- font-size
$font-sizes: (
xs: 10px,
sm: 12px,
md: 13px,
lg: 14px,
xl: 16px,
xxl: 25px
);
@each $sizeKey, $size in $font-sizes {
.fs-#{$sizeKey} {
font-size: $size;
}
}
- flex
$flex-jc: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
);
$flex-ai: (
start: flex-start,
end: flex-end,
center: center,
stretch: stretch,
);
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
@each $key, $value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key, $value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
@for $i from 1 through 9 {
.flex-#{$i} { flex: $i; }
}
- colors
// colors
$colors: (
'primary': #db9e3f,
'info': #4b67af,
'danger': #791a15,
'blue': #4394e4,
'white': #fff,
'light': #f9f9f9,
'grey': #999,
'dark': #222,
'black': #000,
...
);
$border-color: map-get($colors,"light");
@each $colorKey, $color in $colors {
.text-#{$colorKey} {
color: $color;
}
.bg-#{$colorKey} {
background-color: $color;
}
};
- borders
// borders
@each $dir in (top, right, bottom, left) {
.border-#{$dir} {
border-#{$dir}: 1px solid $border-color;
}
};
- spaces
// spacing
// 0-5: 0
// .mt-1 => margin top .pb-2
$spacing-types: (
m: margin,
p: padding,
);
$spacing-directions: (
t: top,
r: right,
b: bottom,
l: left,
);
$spacing-base-size: 10px; //标准size也可以设置成rem;
$spacing-sizes: (
0: 0,
1: 0.25,
2: 0.5,
3: 1,
4: 1.5,
5: 3,
);
// m-0, mx-0
@each $typeKey, $type in $spacing-types {
// .m-1
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}-#{$sizeKey} {
#{$type}: $size * $spacing-base-size;
}
}
// .mx-1 , .my-1
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}x-#{$sizeKey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typeKey}y-#{$sizeKey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
// .mt-1
@each $directionKey, $direction in $spacing-directions {
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}#{$directionKey}-#{$sizeKey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
}
我们可以对变量和类名稍做拆分，方便后续扩展。
最后
使用sass我们可以很方便的编写我们自己的通用的基础样式，最后可以将 scss 文件或者是生成好的 css 文件单独导入其他工程。
参考 ： sass中文网 b站up全栈之巅
本文使用 mdnice 排版
