技术帮助 发表于 2016-11-14 18:15:42

一贴看穿LESS一贴学会LESS

注释
        /*这是CSS里面的注释会被编译到CSS中*/

        //这个注释是LESS专用的,所以不会出现到CSS中

变量
        可变的一个量,比如a=b=c
       
1、LESS中变量的定义方式@

        比如定义一个宽度@test_width:500px;@test_height:500px;
        在运用的适合可以直接这样写
        div{
                width:@test_width;
                height:@test_height;
        }

2、混合写法
        .border{
               border: solid 1px #cccccc;
        }
       
        使用的时候直接嵌套

        .div1{
          .border;
        }

        这时.div1生成的值
       
        .div1 {
          border: solid 1px #cccccc;
        }

2.1混合带参数(可以看作php中的函数)
        .border(@border_color){
                border:sloid 2px @border_color;
        }

        使用方法:
        .div{
                .border(#f60);
        }

        编译出的结果:
        .div {
                border: sloid 2px #ff6600;
        }


2.2混合带参数并且有默认值

        .border(@border_color:#f60){
          border:sloid 2px @border_color;
        }
使用方法:

        不带参数调用
        .div1{
          .border();
        }
        带参数调用
        .div{
          .border(red);
        }

编译出的结果:

        不带参数调用的结果
        .div1 {
          border: sloid 2px #ff6600;
        }
        带参数调用的结果
        .div {
          border: sloid 2px #ff0000;
        }

2.3混合带参数并且有默认值,常见案例例如定义圆角兼容

        .border_radius(@radius_width:5px;){
          -webkit-border-radius:@radius_width ;
          -moz-border-radius:@radius_width ;
          border-radius:@radius_width ;
        }

使用的时候
        .border{
          .border_radius()
        }

编译后的结果就是
        .border {
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
        }
使用的时候也可以传值
        .border{
          .border_radius(50%)
        }

编译后的结果就是
        .border {
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
        }


3.匹配模式

        传值的时候定义一个字符,在使用的时候使用那个字符,就调用那条规则

        .border(all,@w: 5px){
          border-radius: @w;
        }
        .border(t_l,@w:5px){
          border-top-left-radius: @w;
        }
        .border(t_r,@w:5px){
          border-top-right-radius: @w;
        }
        .border(b-l,@w:5px){
          border-bottom-left-radius: @w;
        }
        .border(b-r,@w:5px){
          border-bottom-right-radius: @w;
        }
       
        默认携带参数:@_ 不管调用那一条规则都要把我加上,并且需要注意,@_的后面也要把匹配字符后面的变量或者是值带上!
        .border(@_,@w:5px){
          width: 50px;
          height: 50px;
          background: royalblue;
        }

        调用时只需要更上匹配字符就可以了
       
        如下:我想让四条边都是圆角,就调用all
        .border{
          .border(all,50%);
        }

        结果:生成的值,就是调用.border(all,@w: 5px)... ... 的规则,并且携带上.border(@_,@w:5px)...

        .border {
          border-radius: 50%;
          width: 50px;
          height: 50px;
          background: royalblue;
        }

        如下:我想让右上角的边是圆角,就调用t_r
        .border{
          .border(t_r,50%);
        }

        结果如下:
        .border {
          border-top-right-radius: 50%;
          width: 50px;
          height: 50px;
          background: royalblue;
        }
       
       
4.运算
        所有的数字、颜色值、变量都可以使用运算。

        注意:
                A、运算之间要用空格隔开。
                B、同时进行多运算时,需要涉及优先运算时在”()“括号中完成!
                c、计算的时候可以不用都带上单位,但是你至少要有一个数值有单位

        例如:

                错误写法:
                        width:500px-300; 这时编译工具就会报错
                正确写法:
                        width:500px - 300; 这时编译工具就不会报错
        多值运算实例:

                错误写法:
                       width: 500px - 200 * 2;   他的流程是先计算200*2=400,然后再用500-400,最终的的宽度值就是100px
                正确写法:
                       width: (500px - 200) * 2;他的流程是先计算括号内的(500-200)=300,然后再用300-2,最终的的宽度值就是600px
        单位实例:
                错误写法:
                       width: 500 - 200 * 2;   他的计算结果就是100
                正确写法:
                        width: 500 - 200 * 2px;   他的计算结果就是100px
                        width: 500 - 200px * 2;   他的计算结果也是100px

        小例子1:颜色值计算

        .wp {
       width: 600px;
          height: 100px;
          background: #000000 + 20;    它是将颜色值拆分为 R G B 然后分别加上20 ,然后再返回一个对应的十六位进制的颜色值
        }

        .wp {
          width: 600px;
          height: 100px;
          background: #141414;   计算后的返回值141414
        }

        小例子2:宽度值计算

        HTML结构
        <div class="wp">
          <div class="div1"></div>
          <div class="div2"></div>
        </div>

        LESS结构

        @w:960px;

        .wp{
          width: @w;
        }
        .div1{
          float: left;
          width: 500px;
          height: 300px;
          background: green;
        }

        这时我让div2的宽度等于总宽度减去div1的宽度,然后再去减一个外边局(margin-left)的宽度,剩下的就是他的宽度

        .div2{
          float: right;
          width: (@w - 500) - 10;
          height: 300px;
          margin-left: 10px;
       background: firebrick;
        }

        最后生成后的结果:
        .wp {
          width: 960px;
        }
        .div1 {
          float: left;
          width: 500px;
          height: 300px;
          background: green;
        }
        .div2 {
          float: right;
          width: 450px;
          height: 300px;
          margin-left: 10px;
          background: firebrick;
        }

5.嵌套规则和上一层选择器&
        简化开发的时候的一个代码书写量

        传统写法:
       
        .div1{
          width: 300px;
          height: 200px;
          background: #ff2634;
        }
        .div1 img{
          float: left;
          width: 60px;
          height: 30px;
          padding: 1px;
          margin: 0 10px 10px 0;
          border: solid 1px #cccccc;
        }
        .div1 img:hover{
          border-color: #00f100;
        }
        .div1 p{
          font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
          color: #FFF1E1;
        }

        简化写法,全部将它们写入.div{}里面,和我们的HTML嵌套是一样的规则

        .div1{
          width: 300px;
          height: 200px;
          background: #ff2634;
          img{
          float: left;
          width: 60px;
          height: 30px;
          padding: 1px;
          margin: 0 10px 10px 0;
          border: solid 1px #cccccc;
          }
          img:hover{
          border-color: #00f100;
          }
          p{
          font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
          color: #FFF1E1;
          }
        }
       
        &上一层选择器简化:

        .div1{
          width: 300px;
          height: 200px;
          background: #ff2634;
          img{
          float: left;
          width: 60px;
          height: 30px;
          padding: 1px;
          margin: 0 10px 10px 0;
          border: solid 1px #cccccc;
          &:hover{                                 &:hover这时是在img选择器之内,那么此时&代表的就是上一级选择器img编译后完整结果就是.div1 img:hover { border-color: #00f100; }
          border-color: #00f100;
          }
          p{
          font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
          color: #FFF1E1;
          }
        }

        上面两种方式编译的结果都是一样的,如下
        .div1 {
          width: 300px;
          height: 200px;
          background: #ff2634;
        }
        .div1 img {
          float: left;
          width: 60px;
          height: 30px;
          padding: 1px;
          margin: 0 10px 10px 0;
          border: solid 1px #cccccc;
        }
        .div1 img:hover {
          border-color: #00f100;
        }
        .div1 p {
          font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
          color: #FFF1E1;
        }

6.@arguments 变量

        说明:@arguments代表所有的可变参数

        注意:
                A、@arguments;代表所有可变参数是,参数的先后顺序就是你的()括号内的参数的先后顺序
                B、注意在使用的赋值,值得位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值,分别赋值给第三个... ...以此类推,但是需要主要的是假如我想给第一个和第三个赋值,你不能写(值1,,值3),必须把原来的默认值写上去!

        例如:

        实例1
        .border(@x:solid,@c:red){
          border: 21px @arguments;
        }
        .div1{
          .border()
        }
        生成样式如下

        .div1 {
          border: 21px solid #ff0000;
        }

        实例2
        .border(@w:1px,@x:solid,@c:red){
          border: @arguments;
        }

        .div1{
          .border()
        }

        生成样式如下

        .div1 {
          border: 21px solid #ff0000;
        }


注意在使用的赋值
        .border(@c:red,@w,@x:solid){
          border: @arguments;
        }

        .div1{
          .border(blue,102px)
        }

7.避免编译~ ‘ ”


        将我们不需要进行编译的内容注释掉
        例子:默认情况下会进行计算
        .div1{
          width: calc(960px - 100px);   calc Css3中新增的计算
        }
        编译结果:
        .div1 {
          width: calc(860px);    结果已经帮我们编译了,但实际上我们不需要他帮我们编译,此时我们就可以使用避免编译
        }
       
        使用避免编译~''或~""使用波浪线单引号或者双引号将我们不需要编译的内容扩起来

        .div1{
          width: calc(~'960px - 100px');
        }
        结果:原样输出
        .div1 {
          width: calc(960px - 100px);
        }

8.关键字 !important
        作用:给所有引用的样式加上!important
       
        小案例:
        .divstyle(@p_w:30px,@m_w:10px){
          padding: @p_w;
          margin: @m_w;
        }

        .div1{
          width: calc(~'960px - 100px');
          .divstyle()!important;
        }

        输出结果末尾都会加上!important
        .div1 {
          width: calc(960px - 100px);
          padding: 30px !important;
          margin: 10px !important;
        }


好吧LESS这里就带大家过一遍了,具体的全面的LESS视频课程,请继续关注DZ起点网,如有疑问请在有问必答提问!
有问必答传送门:http://www.dz7.com.cn/discuzf-2-1.html

XDFVS6DFV5ASF51 发表于 2017-1-5 23:54:35

{location}人小手一抖,钱钱到手!

技术帮助 发表于 2019-6-20 17:33:53

LESS nice

技术帮助 发表于 2019-11-6 08:49:20

:lol:lol
页: [1]
查看完整版本: 一贴看穿LESS一贴学会LESS