theme: cyanosis
highlight: a11y-light
Less+响应式布局
less
-
less介绍:
- less是一种提高我们编写css效率的技术,专业术语“css预处理器”,less文件后缀名是".less",相同的技术有(scss,stylues)。
- 在工作中,写样式的地方,都不会直接写在css文件中,而是写在less文件中,再经过插件(easy less vscode)插件自动生成css文件,而我们只要在html结构中引入css文件即可。
可直接link 引入less文件然后点击打开链接会显示 找不到less 再点击创建文件 就会自动创建 切记!!!找到刚刚引入得less文件 八后缀改成.css 因为浏览器不能直接识别less文件
3.easy less vscode插件
2.网页中, 文字文字颜色基本都是统一的, 如果网站改版,变换文字颜色, 如何修改代码?
方法一:逐一修改属性值(太繁琐)
方法二: 把颜色提前存储到一个容器,设置属性值为这个容器名
语法:
定义变量:@变量名:值;
使用变量: css属性:@变量名;
3.less语法–运算:
介绍:
加、减、乘直接书写计算表达式;
除法需要添加 小括号 或在除于号前面加个 “ ”
注意:
- 除法需要添加 小括号 或 “.”;
- 表达式存在多个单位以第一个单位为准;
- 运算符前后要用空格隔开。
less语法–混合(mixin)
4.less语法–嵌套
作用:
快速生成后代选择器。
代码如下:
后代:
/* 后代 */
div {
p {
span {
color: red;
}
}
}
兄弟:
/* 兄弟 */
div{
p{ color: aqua;}
span{color: pink;}
}
子代:
/* 子代选择器 */
div{
>p{
span{
color: pink;
}
}
}
伪元素:
div{
p{