saas和less
sass和less是什么？
- Saas和Less都属于css预处理器，css预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数和继承等概念。将css作为目标生成文件，然后开发者就只要使用这种语言进行css的编码工作。
Sass和Less相关
saas官网
less官网
VScode插件：
Easy LESS
Easy Sass
sass的常用语法
.box{
width: 100px;
font-size: 10px;
}
// 单行注释不会被编译
/*
多行注释会被编译
*/
// 变量
$number : 123px;
// 插值
$key : margin;
$i : 2;
.box#{$i}{
width: $number;
height: $number;
#{$key}:auto;
}
// 作用域 saas的作用域是有顺序的 跟less不同
// 嵌套
.box3{
.span{
width: $number;
}
height: $number;
$number : 456px;
width: $number;
&:hover{
color: red;
}
// 属性嵌套(sass独有)
font : {
size: 10px;
weight:900;
family:宋体;
}
}
// 运算 sass中如果单位不同 是不能进行运算的
$num : 100px;
.box4{
width: $num + 3;
padding: 3 + $num;
height: $num + 10px;
margin: 10px + $num ;
// sass默认/是分割的 并不会进行运算 需要运算的值用()括起来
padding: (20px / 1.5);
color: #010203 * 2;
}
// 函数
// 函数自定义
@function sum($n,$m){
@return $n + $m
}
.box5{
width: round(3.5px);//4px
height: percentage(0.2);//20%
margin: random();
// padding: sqrt(25%);
font-size: sum(10px,6px);
}
// 混入
@mixin show {
display: block;
}
@mixin hide($color) {
display: none;
color: $color;
}
.box6{
width: 60px;
@include show;
@include hide(blue)
}
// 继承
%line{
display: inline;
}
.box8{
@extend %line;
}
.box9{
@extend %line;
}
// 合并
$background : (
a : url(a.png),
b : url(b.png)
);
$transform : (
a : scale(2),
b : rotate(30deg)
);
.box10{
background:map-values($background);
transform: zip(map-values($transform)...)
}
// 媒体查询
.box11{
width: 100px;
@media screen and (min-width: 768px) {
width: 600px;
}
@media screen and (min-width: 1440px) {
width: 900px;
}
}
$count: 3;
// 条件
.box12{
@if($count > 4){
width: 100px + $count;
}
@else{
width: 10px + $count;
}
}
// 循环
// through 包含 同不包含
@for $i from 0 through 2 {
.box-#{$i}{
width: 100px + $i;
}
}
// 导入
@import './reset.scss'
less的常用语法
.box{
font-size: 14px;
}
// 单行注释不会被编译
/*
多行注释会被编译
*/
// 变量
@number : 123px;
// 插值
@key : margin;
@i : 2;
.box@{i}{
width: @number;
height: @number;
@{key} : auto;
}
// 作用域 作用到当前变量的这个{}
// 嵌套
.box3{
.span{
width: @number;
@number : 456px;
}
height: @number;
width: @number;
&:hover{
color: red;
}
}
// 运算 没有单位时 以取变量的单位 单位不同时 以前一个数值的单位为准
@num : 100px;
.box4{
width: @num + 3;
padding: 3 + @num;
height: @num + 10em;
margin: 10em + @num ;
font: 20px / 1.5;
padding: ~"20px / 1.5";
color: #010203 * 2;
}
// 函数
.box5{
width: round(3.5px);//4px
height: percentage(0.2);//20%
// margin: random();
padding: sqrt(25%);
}
// 混入
.show{
display: block;
}
// 类名后加()，可以被混入 但是不会被编译 同时可以接收参数
.hide(@color){
display: none;
color: @color;
}
.box6{
width: 60px;
.show;
.hide(blue);
}
// 命名空间 加()不被编译 否则认为是id属性
#nm(){
.show{
display: inline-block;
}
}
.box7{
#nm.show;
}
// 继承
.line{
display: inline;
}
.box8{
&:extend(.line);
}
.box9{
&:extend(.line);
}
// 合并
.box10{
background+: url(a.png);
background+: url(b.png);
transform+_: scale(2);
transform+_: rotate(30deg);
}
// 媒体查询
.box11{
width: 100px;
@media screen and (min-width: 768px) {
width: 600px;
}
@media screen and (min-width: 1440px) {
width: 900px;
}
}
// 条件
@count : 3;
.get(@cn) when (@cn > 4){
width: 100px + @cn;
}
.get(@cn) when (@cn < 4){
width: 10px + @cn;
}
.box12{
.get(@count);
}
// 循环
@count2: 0;
.get2(@cn) when (@cn < 3){
.get2((@cn+1));
.box-@{cn}{
width: 100px + @cn;
}
}
.get2(@count2);
// 导入
@import './reset.less';
