scss 常用操作
scss 使用说明
1、变量声明 variables
$my-color: #1269b5; // 定义变量
$my-border: 1px solid $my-color; // 变量中也可以使用变量
div.box {
background: $my-color;
}
h1 {
border: $my-border;
}
2 、嵌套 nesting
1.嵌套内容
.nav {
height: 100px;
ul {
line-style: none;
a {
display: block;
color: #000;
//注意 & 是拼接属性，
&:hover {
//正常使用：编译 .nav ul a:hover{}
background: #0d2f7e;
}
:hover {
//错误使用：编译 .nav ul a :hover{}
background: #0d2f7e;
}
}
}
& &-text {
//拼接 编译 .nav .nav-text{}
font-size: 25px;
}
}
2、嵌套属性
编译前
body {
font： {
family: Helvetice, Arial, sans-serif;
size: 20px;
weight: bolder;
}
}
.nav {
border: 1px solid #ccc {
left: 0;
right: 0;
}
}
编译后
body {
font-family: Helvetice, Arial, sans-serif;
font-size: 20px;
font-weight: bolder;
}
.nav {
border: 1px solid #ccc;
border-left: 0;
border-right: 0;
}
3、Mixins 混入
@mixin 声明 ，@include 调用
编译前
@mixin alert($text-color, $back-color) {
background: $back-color;
span {
color: $text-color;
}
}
.alert-warning {
@include alert(#000, #fff); //$text-color:#000;, $back-color:#fff;
}
.alert-info {
@include alert(
$back-color: #d9edf7,
$text-color: #245269
); //也可以用具名的方式传参
}
编译后
.alert-warning {
background: #fff;
}
.alert-warning span {
color: #000;
}
.alert-info {
background: #d9edf7;
}
.alert-info span {
color: #245269;
}
4、继承/扩展 inheritance
@extend 继承
注意：@extend 会继承（被继承对象所有属性和与他相关的其他属性）
编译前
.alert {
paddding: 15px;
}
.alert a {
font-weight: bolder;
}
.alert-info {
@extend .alert; //继承
background: #d9edf7;
}
编译后
.alert,
.alert-info {
padding: 15px;
}
.alert a,
.alert-info a {
font-weight: bolder;
}
.alert-info {
background: #d9edf7;
}
5、@import 导入
在 **CSS** 中就自带 @import 导入功能，但是每次使用@import 浏览器都会发起一次新的 http 请求 这样会消耗 http 资源，会慢一些。
scss 扩展了@import 功能 编译的时候会把导入的文件编译到当前的文件中，从而减少 http 请求。
编译前
// _base.scss
body {
margin: 0;
padding: 0;
}
// style.scss
@import "base" .alert {
paddding: 15px;
}
.alert a {
font-weight: bolder;
}
.alert-info {
@extend .alert; //继承
background: #d9edf7;
}
编译后
body {
margin: 0;
padding: 0;
}
.alert,
.alert-info {
padding: 15px;
}
.alert a,
.alert-info a {
font-weight: bolder;
}
.alert-info {
background: #d9edf7;
}
6、类型
scss 属性有很多种数据类型 type-of();可以判断类型
$ sass -i
>> type-of(5)
"number"
>> type-of(5px)
"number"
>> type-of(hello)
"string"
>> type-of("hello")
"string"
>> type-of(1px solid #000)
"list"
>> type-of(1px 2px)
"list"
>> type-of(red)
"color"
>> type-of(#000)
"color"
>> type-of(rgb(200,102,10))
"color"
>> type-of(hsl(0,100%,50%))
"color"
数字函数
abs() //绝对值
round() //四舍五入
ceil(3.1) //进位 4
floor(3.6) //退位 3
percentage(65px / 100px) //百分位 65%
min(1px,5px,10px) //最小值 1px
max(1px,5px,10px) //最大值 10px
字符串函数
$ sass -i
>> @greeting:"Hello nihao" //声明 @greeting 变量的值为 "Hello nihao"
"Hello nihao"
>> to-upper-case(@greeting) // 字符串转大写
"HELLO NIHAO"
>> to-lower-case(@greeting) // 字符串转小写
"hello nihao"
>> str-length(@greeting) //字符串长度
11
>> str-index(@greeting,"Hello") //字符串在变量@greeting 的位置 位置是从0开始的
1
>> str-insert(@greeting,".net",12) //将字符串插入到变量@greeting 位置为12的地方
"Hello nihao.net"
列表函数
$ sass -i
>> @greeting:5px 10px //声明 @greeting 变量的值为 列表 5px 10px
（5px 10px）
>> length(@greeting) // 列表长度
2
>> nth(@greeting,1) // 返回列表中位置为1的属性
5px
>> index(@greeting,10px) //属性在列表中的位置
2
>> append(@greeting,5px) //列表添加属性
（5px 10px 5px）
>> join(@greeting,5px 10px) //合并列表
（5px 10px 5px 5px 10px）
>> zip(1px 5px 10px,solid solid solid ,green blue red) //将多个列表值转成一个多维列表
((1px solid green),(5px solid blue),(10px solid red))
MAP 函数
$ sass -i
>> @colors:(light:#ffffff,dark:#000000 ) //声明 @color map变量
(light:#ffffff,dark:#000000 )
>> length(@colors) // map表长度
2
>> map-get(@colors,dark) // 获取map key为dark的值
#000000
>> map-keys(@colors) //获取$colors的key
（"light","dark"）
>> map-values(@colors) //获取$colors的值
（#ffffff,#000000）
>> map-has-key(@colors,light) //判断map 属性@colors 是否存在key为light
true
>> @colors：map-merge(@colors,(light-gray:#e5e5e5)) //添加属性
(light:#ffffff,dark:#000000,light-gray:#e5e5e5 )
>> map-remove(@colors,light,dark) //删除属性
(light-gray:#e5e5e5 )
颜色函数
HSL(色相,饱和度,明度)
调整色像值 adjust-hue
编译前
$base-color: #ff0000;
$base-color-hsl: hsl(0, 100, 50%);
body {
background: adjust-hue($base-color, 137deg);
}
编译后
body {
background: #00ff48;
}
调整明度值 增加明度 lighten 减少明度 draken
编译前
$base-color: hsl(222, 100%, 50%);
$light-color: lighten($base-color, 30%); //亮度增加30%
$dark-color: draken($base-color, 20%); //亮度减少20%
.alert {
border: 1px solid $base-color;
background: $light-color;
color: $dark-color;
}
编译后
.alert {
border: 1px solid #004cff;
background: #99b8ff;
color: #002e99;
}
调整饱和度 增加饱和度 saturate 减少饱和度 desaturate
编译前
$base-color: hsl(222, 50%, 50%);
$saturate-color: saturate($base-color, 50%); //饱和度增加50%
$desaturate-color: desaturate($base-color, 30%); //饱和度减少30%
.alert {
background: $saturate-color;
}
.alert-info {
background: $desaturate-color;
}
编译后
.alert {
background: #0051ff;
}
.alert-info {
background: #667699;
}
Interpolation 可以把一个值插入到另一个值身上
#{}
编译前
$version: "0.0.1";
/* 项目当前的版本号是 ： #{$version} */
$name: "info";
$attr: "border";
.alert-#{$name} {
#{$attr}-color: #ccc;
}
编译后
@charset "UTF-8"
/* 项目当前的版本号是:0.0.1 */
.alert-info {
border-color: #ccc;
}
控制指令
@if
@error @warn
$colors: (light:#ffffff,dark:#000000);
@function color($key){
@if not map-has-key(@colors,$key) { //如果触发这个条件会在控制台打印信息
@warn "在 $colors 里没找到#{$key} 这个 key";
}
@return map-get($colors,$key)
}
body {
background-color:color(left);
}
普通的使用方式
编译前
$use-prefixes: true;
$theme: "light";
body {
@if @theme == dark {
background: black;
} @else if @theme == light {
background: white;
} @else {
background: grey;
}
}
.rounded {
@if $use-prefixes {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
border-radius: 5px;
}
编译后
body {
background: white;
}
.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
三元条件使用方式
编译前
$theme: "dark";
.content {
color: if($theme =='light',#000,#FFF );
}
编译后
.content {
color: #FFF ;
}
@for
@for $var from <开始值> through <结束值> { //包含结束值
...
}
@for $var from <开始值> to <结束值> { //不包含结束值
...
}
through 使用 编译前
$columns: 4;
@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i;
}
}
through 使用 编译后
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}
@each 遍历列表
@each $var in $list {
...
}
编译前
$icons: success error warning;
@each $icon in $icons {
.col-#{$icon} {
background-image: url(../icons/#{$icon}.png);
}
}
编译后
.col-success {
background-image: url(../icons/success.png);
}
.col-error {
background-image: url(../icons/error.png);
}
.col-warning {
background-image: url(../icons/warning.png);
}
@while 遍历
@while $var in $list {
...
}
编译前
$icons: success error warning;
@each $icon in $icons {
.col-#{$icon} {
background-image: url(../icons/#{$icon}.png);
}
}
编译后
.col-success {
background-image: url(../icons/success.png);
}
.col-error {
background-image: url(../icons/error.png);
}
.col-warning {
background-image: url(../icons/warning.png);
}
@function 和 @return
@return只允许在@function 中使用，而且必须以@return结束。当遇到@return时，会立即结束函数并返回其结果
参数固定
编译前
// percentage 是内置的转百分之比函数
@function row-cols-width($column) {
@return percentage(1/$column);
}
@for $i from 1 through 6 {
.row-cols-#{$i} {
width :row-cols-width($i);
}
}
编译后
.row-cols-1 {
width :100%;
}
.row-cols-2 {
width :50%;
}
.row-cols-3 {
width :33.33333%;
}
.row-cols-4 {
width :25%;
}
.row-cols-5 {
width :20%;
}
.row-cols-6 {
width :16.666667%;
}
参数不固定 灵活的参数 使用...
编译前
// percentage 是内置的转百分之比函数
@function background-linear-gradient($direction,$gradients...) {
@return linear-gradient($direction,$gradients...);
}
body{
background-image: background-linear-gradient(to left,red,green,blue);
}
编译后
body{
background-image: linear-gradient(to left,red,green,blue);
}
@at-root 跳出嵌套
编译前
.parent{
font-size:20px;
@at-root{
.child-1{
font-size:12px;
}
.child-2{
font-size:12px;
}
.child-3{
font-size:12px;
}
}
}
编译后
.parent{
font-size:20px;
}
.child-1{
font-size:12px;
}
.child-2{
font-size:12px;
}
.child-3{
font-size:12px;
}
