saas和less
sass和less是什么官份？
- Saas和Less都屬于css預(yù)處理器，css預(yù)處理器定義了一種新的語言芙扎，其基本思想是用一種專門的編程語言榜田，為css增加了一些編程的特性，如：變量脊凰、語句抖棘、函數(shù)和繼承等概念。將css作為目標生成文件狸涌，然后開發(fā)者就只要使用這種語言進行css的編碼工作切省。
Sass和Less相關(guān)
saas官網(wǎng)
less官網(wǎng)
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;
}
// 函數(shù)
// 函數(shù)自定義
@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;
}
}
// 循環(huán)
// through 包含 同不包含
@for $i from 0 through 2 {
.box-#{$i}{
width: 100px + $i;
}
}
// 導(dǎo)入
@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;
}
}
// 運算 沒有單位時 以取變量的單位 單位不同時 以前一個數(shù)值的單位為準
@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;
}
// 函數(shù)
.box5{
width: round(3.5px);//4px
height: percentage(0.2);//20%
// margin: random();
padding: sqrt(25%);
}
// 混入
.show{
display: block;
}
// 類名后加()，可以被混入 但是不會被編譯 同時可以接收參數(shù)
.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);
}
// 循環(huán)
@count2: 0;
.get2(@cn) when (@cn < 3){
.get2((@cn+1));
.box-@{cn}{
width: 100px + @cn;
}
}
.get2(@count2);
// 導(dǎo)入
@import './reset.less';
