CSS 进阶篇

#CSS 进阶篇| 来源: 网络整理| 查看: 265

CSS 进阶篇 # css预处理函数 1. Less Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。 1. 使用 Less 有两种方式在页面中引入 Less.js

可在官网下载

或使用CDN

复制代码复制代码

需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less

复制代码复制代码在命令行使用npm安装 npm install -g less 复制代码复制代码

具体使用命令

$ lessc styles.less > styles.css 复制代码 2. 功能特性变量

我们常常在 CSS中看到同一个值重复多次，这样难易于代码维护。理想状态，应是下面这样：

const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor); $(".arctive").css("background-color",bgColor); 复制代码复制代码

只要我们修改 bgColor这一个变量，整个页面的背景颜色都会随之改变。

而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量，所以只能定义一次，不能重复使用。

1. 值变量 /* Less */ @color: #999; @bgColor: skyblue;//不要添加引号 @width: 50%; #wrap { color: @color; background: @bgColor; width: @width; } /* 生成后的 CSS */ #wrap { color: #999; background: skyblue; width: 50%; } 复制代码

以 @ 开头定义变量，并且使用时直接键入 @名称。

在平时工作中，我们就可以把常用的变量封装到一个文件中，这样利于代码组织维护。

@lightPrimaryColor: #c5cae9; @textPrimaryColor: #fff; @accentColor: rgb(99, 137, 185); @primaryTextColor: #646464; @secondaryTextColor: #000; @dividerColor: #b6b6b6; @borderColor: #dadada; 复制代码 2. 选择器变量

让选择器变成动态

/* Less */ @mySelector: #wrap; @Wrap: wrap; @{mySelector}{ //变量名必须使用大括号包裹 color: #999; width: 50%; } .@{Wrap}{ color:#ccc; } #@{Wrap}{ color:#666; } /* 生成的 CSS */ #wrap{ color: #999; width: 50%; } .wrap{ color:#ccc; } #wrap{ color:#666; } 复制代码复制代码 3. 属性变量

可减少代码书写量

/* Less */ @borderStyle: border-style; @Soild:solid; #wrap{ @{borderStyle}: @Soild;//变量名必须使用大括号包裹 } /* 生成的 CSS */ #wrap{ border-style:solid; } 复制代码复制代码 4. url 变量

项目结构改变时，修改其变量即可。

/* Less */ @images: "../img";//需要加引号 body { background: url("@{images}/dog.png");//变量名必须使用大括号包裹 } /* 生成的 CSS */ body { background: url("../img/dog.png"); } 复制代码 5.声明变量

有点类似于下面的混合方法

结构: @name: { 属性: 值 ;}; 使用：@name(); /* Less */ @background: {background:red;}; #main{ @background(); } @Rules:{ width: 200px; height: 200px; border: solid 1px red; }; #con{ @Rules(); } /* 生成的 CSS */ #main{ background:red; } #con{ width: 200px; height: 200px; border: solid 1px red; } 复制代码 6. 变量运算

不得不提的是，Less 的变量运算完全超出我的期望，十分强大。

加减法时以第一个数据的单位为基准乘除法时注意单位一定要统一 /* Less */ @width:300px; @color:#222; #wrap{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; } /* 生成的 CSS */ #wrap{ width:280px; height:200px; margin:1400px; color:#444; background-color:#333; } 复制代码 7. 变量作用域

一句话理解就是：就近原则，不要跟我提闭包。

借助官网的Demo

/* Less */ @var: @a; @a: 100%; #wrap { width: @var; @a: 9%; } /* 生成的 CSS */ #wrap { width: 9%; } 复制代码复制代码 8. 用变量去定义变量 /* Less */ @fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; } /* 生成的 CSS */ #wrap::after{ content: "I am fnord."; } 复制代码 2. 嵌套 1. &的妙用

& ：代表的上一层选择器的名字，此例便是header。

/* Less */ #header{ &:after{ content:"Less is more!"; } .title{ font-weight:bold; } &_content{//理解方式：直接把 & 替换成 #header margin:20px; } } /* 生成的 CSS */ #header::after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//没有嵌套！ margin:20px; } 复制代码 2.媒体查询

在以往的工作中，我们使用媒体查询，都要把一个元素分开写

#wrap{ width:500px; } @media screen and (max-width:768px){ #wrap{ width:100px; } } 复制代码复制代码

Less 提供了一个十分便捷的方式

/* Less */ #main{ //something... @media screen{ @media (max-width:768px){ width:100px; } } @media tv { width:2000px; } } /* 生成的 CSS */ @media screen and (maxwidth:768px){ #main{ width:100px; } } @media tv{ #main{ width:2000px; } } 复制代码复制代码

唯一的缺点就是每一个元素都会编译出自己 @media 声明，并不会合并。

3.实战技巧

可以借助 Less 在元素中，去定义自己的私有样式。

/* Less */ #main{ // something.. &.show{ display:block; } } .show{ display:none; } 复制代码 const main = document.getElementById("main"); main.classList.add("show"); 复制代码

结果：

#main.show{ display:block; } .show{ display:none; //会被覆盖。 } 复制代码 3. 混合方法 1. 无参数方法

方法犹如声明的集合，使用时直接键入名称即可。

/* Less */ .card { // 等价于 .card() background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card;//等价于.card(); } /* 生成的 CSS */ #wrap{ background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } 复制代码复制代码

其中 .card 与 .card() 是等价的。个人建议，为了避免代码混淆，应写成 :

.card(){ //something... } #wrap{ .card(); } 复制代码复制代码

要点：

. 与 # 皆可作为方法前缀。方法后写不写 () 看个人习惯。 2. 默认参数方法 Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。 @arguments 犹如 JS 中的 arguments 指代的是全部参数。传的参数中必须带着单位。 /* Less */ .border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 } #wrap{ .border(0px); } #content{ .border;//等价于 .border() } /* 生成的 CSS */ #main{ border:solid 1px red; box-shadow:0px,5px,30px,red; } #wrap{ border:solid 1px #000; box-shadow: 0px 50px 30px #000; } #content{ border:solid 1px #000; box-shadow: 10px 50px 30px #000; } 复制代码复制代码 3. 方法的匹配模式

与面向对象中的多态很相似

/* Less */ .triangle(top,@width:20px,@color:#000){ border-color:transparent transparent @color transparent ; } .triangle(right,@width:20px,@color:#000){ border-color:transparent @color transparent transparent ; } .triangle(bottom,@width:20px,@color:#000){ border-color:@color transparent transparent transparent ; } .triangle(left,@width:20px,@color:#000){ border-color:transparent transparent transparent @color; } .triangle(@_,@width:20px,@color:#000){ border-style: solid; border-width: @width; } #main{ .triangle(left, 50px, #999) } /* 生成的 CSS */ #main{ border-color:transparent transparent transparent #999; border-style: solid; border-width: 50px; } 复制代码复制代码

要点

第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。如果匹配的参数是变量，则将会匹配，如 @_ 。 4. 方法的命名空间

让方法更加规范

/* Less */ #card(){ background: #723232; .d(@w:300px){ width: @w; #a(@h:300px){ height: @h;//可以使用上一层传进来的方法 } } } #wrap{ #card > .d > #a(100px); // 父元素不能加括号 } #main{ #card .d(); } #con{ //不得单独使用命名空间的方法 //.d() 如果前面没有引入命名空间 #card ，将会报错 #card; // 等价于 #card(); .d(20px); //必须先引入 #card } /* 生成的 CSS */ #wrap{ height:100px; } #main{ width:300px; } #con{ width:20px; } 复制代码复制代码

要点

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。在引入命令空间时，如使用 > 选择器，父元素不能加括号。不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。子方法可以使用上一层传进来的方法 5. 方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */ #card{ // and 运算符，相当于与运算 &&，必须条件全部符合才会执行 .border(@width,@color,@style) when (@width>100px) and(@color=#999){ border:@style @color @width; } // not 运算符，相当于非运算 !，条件为不符合才会执行 .background(@color) when not (@color>=#222){ background:@color; } // , 逗号分隔符：相当于或运算 ||，只要有一个符合条件就会执行 .font(@size:20px) when (@size>50px) , (@size.border(200px,#999,solid); #card .background(#111); #card > .font(40px); } /* 生成后的 CSS */ #main{ border:solid #999 200px; background:#111; font-size:40px; } 复制代码复制代码

要点

比较运算有： > >= = =< 1){ @size:16px; } .loopAnimation(@i) when (@i

【本文地址】

公司简介

联系我们