百度收录网站中文称,深圳专业做网站技术,访问网站获取qq,wordpress 主题 设计提示#xff1a;less,sassscss 目录
一、less
1.变量
2.嵌套规则
3.混合
4.针对属性值进行操作的函数
5.循环
6.拓展语法
二、scsssass
1.sass
2.scss 一、less
是一个开源的、基于 CSS 的预处理器#xff0c;它使得编写和维护 CSS 更加简单和高效。通… 提示less,sassscss 目录
一、less
1.变量
2.嵌套规则
3.混合
4.针对属性值进行操作的函数
5.循环
6.拓展语法
二、scsssass
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文件中
二、scsssass
1.sass
// 声明变量
$color: red;// 后缀名为.sass的文件 对语法要求比较严格
// 对换行、空格有要求
.boxwidth: 1000px;height: 1000px;background-color: red;ullist-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%;
}
