提示：less,sass&scss
目录
一、less
1.变量
2.嵌套规则
3.混合
4.针对属性值进行操作的函数
5.循环
6.拓展语法
二、scss&sass
1.sass
2.scss
一、less
是一个开源的、基于 CSS 的预处理器，它使得编写和维护 CSS 更加简单和高效。通过使用 Less，你可以使用类似于编程语言的结构，如变量、嵌套、混合（Mixins）、函数等，来组织和管理你的样式表。Less 的语法比原生的 CSS 更加灵活和强大，使得开发者能够更轻松地构建复杂的样式。
1.变量
/*
*
* 1) 声明变量
*
*
*/
@color: #ff5500;
@w: 1000px;
@h: 80px;
@bgColor: #f3e4ca;
@pad: 0 20px;
@borderColor: #ff5500;
.container {
width: @w;
margin: 0 auto;
}
2.嵌套规则
/*
*
* 2) 嵌套规则
*
*
*/
.index-header {
height: @h;
line-height: @h;
background-color: @bgColor;
padding: @pad;
.logo {
color: @color;
font-size: 40px;
font-weight: bold;
}
}
// 过去的做法
// .index-nav {}
// .index-nav ul {}
// .index-nav ul li {}
// .index-nav ul li a {}
// 现在的做法
.index-nav {
padding: @pad;
ul {
width: 100%;
height: 80px;
display: flex;
align-items: center;
border-bottom: 2px solid @color;
li {
margin: 0 15px;
a {
color: @color;
text-decoration: none;
}
}
}
}3.混合
/*
*
* 3) 混合
* 可以重复使用的代码块
*
*/
@width: 50px;
@height: 50px;
.size() {
width: @width;
height: @height;
}
.base() {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
.addColor(@c: red) {
background-color: @c;
}
.icon-heart {
display: inline-block;
vertical-align: middle;
position: relative;
// 在less 文档 可以直接使用加减乘除 + - * /
margin: (@width / 2) (@width / 2);
transform: rotate(45deg) scale(1);
.size();
.addColor(red);
// 伪类元素
&::before {
.base();
.size();
.addColor(red);
left: -(@width / 2);
}
&::after {
.base();
.size();
.addColor(red);
top: -(@width / 2);
}
}
4.针对属性值进行操作的函数
/*
*
* 4) 针对属性值进行操作的函数
* 向上取整 向下取整
*
*/
.box {
width: (1000px / 3);
width: floor((1000px / 3));
width: ceil((1000px / 3));
}
ol {
list-style: none;
padding: 0;
margin: 0;
}5.循环
// 5) 循环 1 2 3 4 5 6
.loop(@i) when (@i < 7) {
// less文档中字符串
.demo-@{i} {
margin-top: 5px;
width: 50px + (@i * 50);
height: 10px;
background-color: rgba(255,0,0, (@i / 10));
}
.loop(@i + 1);
}
// 使用.loop()
.loop(1);
// 字符串拼接
// @i: 1;
// .demo-@{i} {
// 6.拓展语法
// 6) 拓展语法 (代码重复使用)
.square {
width: 100px;
height: 100px;
background-color: deepskyblue;
margin-top: 10px;
}
.circle:extend(.square) {
border-radius: 20px;
}注：less中有两种注释方式，//不会编译到.css文件中，/**/会编译到.css文件中
二、scss&sass
1.sass
// 声明变量
$color: red;
// 后缀名为.sass的文件 对语法要求比较严格
// 对换行、空格有要求
.box
width: 1000px;
height: 1000px;
background-color: red;
ul
list-style: none;
li
border-bottom: 1px solid #ccc;
注：旧的版本已经不推荐使用
2.scss
// 注释1
/*注释2*/
/*
*
*
*1） 声明变量
*
*
*/
$color: red;
.box {
color: $color;
}
/*
*
*
*2) 嵌套规则
*
*
*/
.nav {
width: 1000px;
ul {
list-style: none;
li {
border-bottom: 1px solid #ccc;
a {
text-decoration: none;
height: 40px;
line-height: 40px;
}
}
}
}
/*
*
*
* 3) 混合语法
* 可重复使用的代码块
*
*/
@mixin size(){
width: 1000px;
height: 100px;
}
@mixin addColor($c:red){
background-color: $c;
}
.header {
@include size();
@include addColor();
}
.footer {
@include size();
@include addColor(green);
}
.nav {
@include size();
@include addColor(blue);
}
// 4) 运算 + - * /
.image-box {
width: (256px / 2);
}
// 5） 函数
.text-box {
width: floor(1000.99999px);
}
// 6) 循环
// 写法1：
@for $i from 1 to 5 {
// 字符串拼接
.demo-#{$i}{
width: 100px + (10px * $i);
}
}
// 写法2：
@each $key in header nav footer {
.#{$key}-demo{
width: 100px;
}
}
// 7) 拓展语法
.square {
width: 100px;
height: 100px;
background-color: pink;
}
.circle {
@extend .square;
border-radius: 50%;
}
