CSS预处理语言之一-------LESS

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1、声明变量:

@变量名:变量值

使用变量:@变量名

>>>变量使用的原则

多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值。

>>>less中的变量类型,

① 数值类:不带单位的123 带单位的122px;

②字符串类型,带引号的"hahaha" 不带引号的 red #ff0000;

③颜色类 red #ff0000;RGB(255,255,0)

④值列表类型,多个值用逗号或者空格分隔,10px solid red

在css中出现的属性值,都可以出现在less中。

@color:#FF0000;
@lenght:100px;
#div1{
    width: @lenght;
    height: @lenght*2;
    background-color: @color;
}

2、混合(Mixins)

①无参混合

声明:.class{}

调用:在选择器中使用.class;直接调用

②有参无默认值混合:

声明: .class(@param){}

调用:.class(paramvalue)

③有参有默认值混合:

声明 .class(@param:10px){}

调用 .class(paramvalue)或者.class();

>>>如果声明是,没有给参数默认值,则调用时必须赋值,否则报错;

>>>无参混和,实际上就是一个普通的class选择器,会被编译到css文件中;

而有参混和在编译时,不会出现css文件中

//无参混合
.borderRadius{
   border-radius: 10px;
    -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}
//有参无默认值混合
.borderRadius1(@radius){
   border-radius: @radius;
    -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}
//有参有默认值混合
.borderRadius2(@radius:10px){
   border-radius: @radius;
    -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}

3、less中的匹配模式

①声明:

@pipei(条件一,参数){} @pipei(条件二,参数){} @pipei(@_,参数){}

②调用:

@pipei(条件的值:参数的值){}

③匹配规则:

根据调用时输入的条件值,并寻找与之匹配的混合执行

@_表示不管匹配成功与否,都会执行的选项。

/*匹配模式*/
.pipei(lefts,@width:10px){
    margin-left: @width;
}
.pipei(rights,@width:10px){
    margin-right: @width;
}
.pipei(tops,@width:10px){
    margin-top: @width;
}
.pipei(bottoms,@width:10px){
    margin-bottom: @width;
}
.pipei(@_,@width:10px){
  padding: 10px;
}

4、@arguments特殊变量

在混合中,@arguments表示传入的所有参数。@arguments中的多个参数之间,用空格分隔。

.border(@width,@style,@color){
border:@arguments;//----->border:@width @style @color;
}

5、Less中的嵌套

less中允许css选择器按照html代码进行嵌套,这也是LESS中运用最广,最便捷的功能

less中的嵌套默认后代选择器,如果需要子代选择器,需要在前面加>

&符号表示这个&所在的上一层选择器,比如上述&,表示section里面的ul

section{
    width: :800px;
    height: 200px;
    background-color: #ccc;
    p{
        color:red;
        font-weight: bold;
        }
    ul{
        padding: 0px;
        list-style: none;
        >li{
            float: left;
            width: 100px;
            height: 50px;
            background-color: blue;
            &:hover{
            background-color: green;
            }
        }
    }   

CSS预处理语言之二-----SCSS

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下面的命令,可以在屏幕上显示.scss文件转化的css代码

1 scss中的变量

①声明变量:$变量名:变量值

SCSS中,允许将变量嵌套在字符中,但是变量必须使用井{}包裹

$width:100px;
$position:left;
#div1{
    width:$width ;
    height: $width;
    background-color: red;
    border-#{$position}:10px solid yellow;
}

2、SCSS中的运算

会将单位进行运算,使用时许注意最终的单位是否正确。

eg:10px*10px =100 px*px 报错

3、SCSS中的嵌套:

选择器嵌套:属性嵌套:伪类嵌套

① 选择器嵌套 ul{ li{ } }

嵌套默认为后代选择器:如果需要自带选择器,可以再选择器前加>

可以再选择器的{}中,使用&表示上一层的选择器。

② 伪类嵌套li{&:hover{} }

在选择器的{}中,使用&配合伪类事件,可以表示当前选择器的伪类

③ 属性嵌套: font:{

size:16px;

weight:blod;

family:"微软雅黑";

style:"italic";

}

对于属性名有-分隔为多段的属性,可以使用属性嵌套。属性名的前半部分,必须紧跟一个:才能使用{}包裹属性的后半部分;

section{
    background-color: #ccc;
    p{
        color: red;
    }
    ul{
        padding: 0px;
        li{
            list-style: none;
            &:hover{
                color: red;
            }
            font:{
                size:16px;
                weight:blod;
                family:"微软雅黑";
                style:"italic";
            }
        }
    }
}

4、混合宏、继承、占位符

①混合宏:使用@mixin声明混合宏,在其他选择器中使用@include调用混合宏

@mixin hunhe(){} .class{@include hunhe;}

@mixin hunhe($param){} .class{@include hunhe(value);}

@mixin hunhe($param:value){} .class{@include hunhe();}

>>>声明时,可以有参数,也可以没有参数,参数可以有默认值,也可以没有默认值。但是调用时必须符合声明时的要求,与less中的混合相同

>>>优点:①可以传参 ②不会产生同名的class

>>>缺点调用时,会把混合宏中的所有代码copy到选择器中,产生大量重复代码。

②继承 声明一个普通的class,在其他选择器中使用@extend继承这个class

.class1{} .class2{ @extend .class1; }

>>>优点:将不同的代码。提取到并集选择器,减少冗余代码;

>>>确定:①不能传参 ②生成一个多余的class

③占位符 使用%声明占位符,在其他选择器中使用@extend继承展位符:

%class1{}

.class4{@extend %class1;}

>>>优点:将不同的代码。提取到并集选择器,减少冗余代码,不会生成一个多余的class

>>>缺点:不能传参

//继承
.class1{
    color: red;
}
.class{
    @extend .class1;
    background-color: yellow;
}
//占位符

%class1{
    color: red;
}
.class4{
    @extend %class1;
    background-color: yellow;
}
.class5{
    @extend %class1;
    background-color: green;
}

5、SCSS里的结构

//for循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//while循环
$i:0;
@while $i<10{
    .while-#{$i}{
        border: #{$i}px solid red;
    }
    $i:$i+1;
}
//有问题
//each循环遍历

@each $item in c1,c2,c3,c4{
    $i:$i+1;
  .#{$item}{
     border: #{$item}px solid red;
   }
} 

@function func($num){
    @return $num *2;
}
.funcTest{
    width: func(10px);
}

css预处理语言--让你的css编写更加简单方便的更多相关文章

  1. css预处理语言的模块化实践

    编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋.对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目 ...

  2. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  3. Less:Less(CSS预处理语言)

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  4. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

  5. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

  6. CSS 预处理语言之 Scss 篇

    简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西,我们平时都称之为 Sass:Scss 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强 ...

  7. LESS,强大的CSS预处理语言

    虽然写的css不多,但是我已经切身感觉到了书写css的恶心...抛开最令人烦的浏览器兼容问题不说,这个语言本身就有不少问题. 最简单的,比如多个地方是同一个颜色的,如果可以写在一个样式里还没什么,但是 ...

  8. CSS预处理语言——less与sass的使用

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...

  9. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

随机推荐

  1. 博文Contents<1--到450—>

    积分=排名>2017-05-15这一天还真是厉害了.让我等了5个月时间... ====================-------------- 前言:博客中的随笔文章.并非都是笔者的原创文章 ...

  2. View.post() 不靠谱的地方你知道吗?

    版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 一.前言 有时候,我们会需要 ...

  3. Android事件传递机制详解及最新源码分析——View篇

    摘要: 版权声明:本文出自汪磊的博客,转载请务必注明出处. 对于安卓事件传递机制相信绝大部分开发者都听说过或者了解过,也是面试中最常问的问题之一.但是真正能从源码角度理解具体事件传递流程的相信并不多, ...

  4. c# 后台get post请求

    //get请求 public static TResult Get<TResult>(string host, string url) { var httpClient = new Htt ...

  5. Grails笔记四:Groovy特性小结

    在学习Grails的时候与Groovy打交道不可避免,虽然不必太深刻,但多知道一些特性也是很有帮助的~ 1.相除后获取整数 使用intdiv()方法可以获得整数,注意点是这个方法只适用两个整数相除,浮 ...

  6. .net基础第一天

    .net基础 <head>+控制类标签 +<head> 1  <body>+网页要显示的内容+</body> <body +空格+bgcolor= ...

  7. 【小白成长撸】--Fibonacci

    /*程序的版权和版本声明部分: *Copyright(c) 2016,电子科技大学本科生 *All rights reserved. *文件名:Fibonacci *程序作用:计算菲薄拉稀数列 *作者 ...

  8. HTML5 javascript 音乐 音频

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 结对作业(1)----基于GUI的四则运算

    小伙伴:201421123031 余洋 201421123044  潘志坚  题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是W ...

  10. 201521123099 《Java程序设计》第4周学习总结

    1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) 2.1 将在网上商城购物或 ...