精华内容
下载资源
问答
  • less和sass

    2020-06-02 17:05:02
    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 ...

    less与sass的区别

            在介绍less和sass的区别之前,我们先来了解一下他们的定义:

    一、Less、Sass/Scss是什么?

    1、Less:

        是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。

        Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。

     

    2、Sass:

        是一种动态样式语言,Sass语法属于缩排语法,

        比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

    Sass与Scss是什么关系?

    Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。


    二、less和sass的相同之处

    Less和Sass在语法上有些共性,比如下面这些:

    1、混入(Mixins)——class中的class;

    2、参数混入——可以传递参数的class,就像函数一样;

    3、嵌套规则——Class中嵌套class,从而减少重复的代码;

    4、运算——CSS中用上数学;

    5、颜色功能——可以编辑颜色;

    6、名字空间(namespace)——分组样式,从而可以被调用;

    7、作用域——局部修改样式;

    8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。


    三、less和sass的区别

        Less和Sass的主要不同就是他们的实现方式。

        Less是基于JavaScript,是在客户端处理的。

        Sass是基于Ruby的,是在服务器端处理的。

        关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$。

    1、Less:

    【两种注释方式】

    ①//less中的注释,但这种不会被编译

    ②/*

     * 这也是less中的注释,但是会被编译

     */

     

    【less中的变量】

    1、声明变量:

        @变量名:变量值;

        使用变量: @变量名

        >>>less中变量的类型:

        ①数字类 1 10px

        ②字符串:无引号字符串 red ;有引号字符串 "haha"

        ③颜色类:red #000000 rgb()

        ④值列表类型:用逗号和空格分隔 10px solid red

        >>>变量使用原则:

        多次频繁出现的值、需要修改的值,设为变量

    2、混合(MiXins)

        ①无参混合

        声明:.name{}

        选择器中调用:.name;

        ②代参混合

        无默认值

        声明:.name(@param){}

        调用:.name(parValue);

        有默认值

        声明:.name(@param:value){} 

        调用:.name(parValue); //parValue可省

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

        >>>无参混合,会在css中编译除同名的class选择器,有参的不会

    3、less的匹配模式:

    使用混合进行匹配,类似于if结构

    声明:

    .name(条件一,参数){}

    .name(条件二,参数){}

    .name(@_,参数){}

    调用:

    .name(条件值,参数值);

    匹配规则:根据调用时提供的条件值去寻找与之匹配的"MiXins"执行,其中@_表示永远需要执行的部分

    4、less中的运算

    + - * / 可带、可不带单位

    颜色运算时,红绿蓝分三组计算,组内可进位,组间互不干涉

    5、包含了传进来的所有参数:

    border:@arguments;

    6、less中的嵌套:保留HTML中的代码结构

    ①嵌套默认是后代选择器,如果需要子代选择器,则在子代前加>

    ②.&表示上一层 &:表示上一层的hover事件

    2、Sass:

    1、Sass中的变量

    使用 $变量名:变量值,声明变量;

    如果变量需要在字符串中嵌套,则需使用#加大括号包裹;

    border-#{$left}:10px solid blue;

    2、Sass中的运算

    会将单位也进行运算,使用时需注意最终单位例:10px*10px=100px*px

    3、sass中的嵌套:

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

    选择器嵌套

          ul{ li{} } 后代

               ul{ >li{} } 子代

    &:表示上一层 div{ ul{ li{ &=="div ul li" } } }

    属性嵌套:

    属性名与大括号之间必须有: 

    例如:border:{color:red;}

    伪类嵌套:ul{li{ &:hover{ "ul li:hover" } } }

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

    ①混合宏:

    声明:@mixin name($param:value){}

    调用:@include name(value);

    >>>声明时,可以有参,可以无参;可带默认值,也可不带;但是,调用时,必须符合声明规范。同less

    >>>优点:可以传参,不会生成同名class;

    >>>缺点:会将混合宏中的代码,copy到对应的选择器中,产生冗余代码!

    ②继承:

    声明:.class{}

    调用:@extend .class;

    >>>优点:继承的相同代码,会提取到并集选择器中,减少冗余代码

    >>>缺点:无法进行传参,会在css中,生成一个同名class

    ③占位符:

    声明:&class{}

    调用:@extend %class;

    >>>优点:继承相同代码,会提前到并集选择器;不会生成同名的class选择器

    >>>缺点:无法进行传参

    综上所述:当需要传递参数时,用混合宏;当有现成的class时用继承;当不需要参数,也不需要class时,用占位符

    5、if条件结构:

    @if 条件 {}@else {}

    6、for循环结构:

    //不包含10;

    @for $i from 1 to 10{}

    //包含10;

    @for $i from 1 through 10{}

     

    7、while循环结构:

    $j: 1;

    @while $j<10 {

        .while#{$j} {    border:#{$j}px solid red;

      }

      $j: $j+1;

    }

    8、each循环遍历

    @each item in a,b,c,d{//item表示每一项}

    9、函数:

    @function func($length) {  $length1:$length*5;  @return $length1;}//调用:

    func(10px);

    10、使用...将传进来的所有参数,接收到一个变量中

    @mixin bordeRadius($param1...) {  //使用...将传进来的所有参数,接收到一个变量中

      border-radius:$param1;  -webkit-border-radius:$param1;}

     

    四. 总结

    不管是Sass,还是Less,

    都可以视为一种基于CSS之上的高级语言,

    其目的是使得CSS开发更灵活和更强大,

    Sass的功能比Less强大,

    基本可以说是一种真正的编程语言了,

    Less则相对清晰明了,易于上手,对编译环境要求比较宽松。

    考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less,

    但也会去尝试使用sass,毕竟为以后的工作做准备。

     

    五.扩展思考

    处理机制不一样会带来什么不同?

    因为Less与Sass处理机制不一样,

    前者是通过客户端处理的,

    后者是通过服务端处理,

    相比较之下前者解析js会比后者慢一点。


     

    展开全文
  • Less Sass

    2018-05-13 18:43:00
    sassless 的区别与学习 : https://www.cnblogs.com/roashley/p/7731865.html 或  https://www.cnblogs.com/feng-wu/p/6040387.html(less教程,变量,混合,匹配,运算,嵌套...) 使用css预处理器的...

             sass 与 less 的区别与学习   :    https://www.cnblogs.com/roashley/p/7731865.html  或 

        https://www.cnblogs.com/feng-wu/p/6040387.html(less教程,变量,混合,匹配,运算,嵌套...)

     

    使用css预处理器的好处:

    1、css有很多的兼容性问题,使用 预处理器可以把某个兼容的属性写在一个函数里面。其它的地方需要用到这个属性,直接调用这个方法就可以了。

      就不需要对应浏览器做兼容处理了(比如对应不同浏览器加不同的前缀)。

    .box-shadow (@string) {
        -webkit-box-shadow: @string;
        -moz-box-shadow:    @string;
        box-shadow:         @string;
    }

     2、less中 变量和函数 都是不编译的,只有在使用它们的地方才会编译它们。这样的一组会用到属性,放在less文件上,编译后,没有一点的存储占用。


     

    LESS

    1、注释(css中注释只有      /*    */   这一种):

      less中注释有两中,/*    */注释编译后保留;//  注释编译后消失。

    2、@import "  ";  可以导入其它的less文件。

    3、避免编译:   ~“     ”   或   ~‘    ’    可以避免less把不需要编译的属性值给编译了。如   width:~"calc(300px - 30px)" ;这个不能让less计算,CSS3中是有这个运算功能的。这个表达式是给浏览器解析的,不是less。https://www.imooc.com/video/4839

    4、伪类写法:  :  https://www.cnblogs.com/ranzige/p/3654296.html

    5、less语法详解  :  https://blog.csdn.net/iamcgt/article/details/73028435

    其它参考https://blog.csdn.net/lidysun/article/details/52537770

    6、混合

         参考:https://blog.csdn.net/iamcgt/article/details/73028435?utm_source=itdadao&utm_medium=referral

      —— 继承其它的选择器属性。(只是继承哪个选择器的属性,选择器名没有影响)

     

    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu a {
      color: #111;
      .bordered;
    }

      —— 函数 (带参数)

    .border-radius (@radius) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }
    #header {
      .border-radius(4px);
    }

       ——  函数 (参数设置默认值)

    .border-radius (@radius: 5px) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }
    #header {
      .border-radius;  
    }

      —— 函数 (不带参数), 用于隐藏这个属性集合,不让它暴露到CSS中去。

    .wrap () {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }
    
    pre { .wrap }

      —— 函数 (@arguments包含了所有传递进来的参数.。不必单独处理每一个参数)

    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
      box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

     

     

     


     

    sass

    1、less有两种注释,/* */是会被编译到css文件中的。//不会

    2、scss中的变量(Variables)在SASS中你也可以声明变量,并在整个样式表中使用。

    3、scss中选择器嵌套特性,我们可以在父元素的大括号{}里写这些元素。同时可以使用&符号来引用元素的父选择器(这个主要是伪类的和组合选择器有用)。

    4、scss中属性嵌套,

    5、scss中Mixins  简单的说Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。

    6、scss中选择器继承 ,这个的一个明显的优点是,就是在有相同类名或标签名的选择器中,出现耦合的可能性比较少,因为前面已经有选择器给它限制了。可以很方便。

    7、.css.map文件的作用是让浏览器显示的css在地几行代码会对应到scss文件的第几行。这样我们要通过修改sass文件来修改css代码就会很方便,如果直接在css中改就不用这个东西了。

     

    总结:scss是sass新的语法,scss(sass)中的四个基本特性:变量、嵌套、Mixins和继承的基本使用规则。还有@function函数方法

    sass的其他的特性,碰到需要的时候在学吧。

    转载于:https://www.cnblogs.com/wfblog/p/9032922.html

    展开全文
  • Less和SASS

    2018-08-22 20:52:53
    一,LESS 1,条件判断 ...当判断相等时,使用等号(=)实现,没有(== ===) 判断多个条件时,使用and关键字,配合when使用 when and 判断非语句,使用not ,when not 2,函数-Math 在less...

    一,LESS

    1,条件判断

    在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现的

    在when方法中添加条件时,不需要单位

    当判断相等时,使用等号(=)实现,没有(== 和 ===)

    判断多个条件时,使用and关键字,配合when使用 when and

    判断非语句,使用not ,when not

    2,函数-Math

    在less中我们可以像JS中使用Math对象一样使用less中的数学函数

    Floor:向下取整(参数带单位)

    Ceil:向上取整

    Round:四舍五入

    Percentage:将数值转化为百分数,(参数如果带有%单位是无效的),参数只能是数组

    sqrt():平方根

    abs:()绝对值

    sin:()sin 函数

    asin():arcsin函数

    cos():cos函数

    acos():arccos函数

    tan() :tan函数

    atan():arctan函数

    pi():返回π

    pow(a,b):a的b次方

    mod(m,n):m对n取余

    convert(m,n):数字之间转换

    unit(m,n):不转换情况下替换数字

    3,颜色定义函数

    rgb():可以生产一个16进制的色彩值,标准的色彩方法

    语法:

    rgb(red,green,blue)每一个值都是0-255

    rgba():rgba(red,green ,blue,alpha)红绿蓝透明度

    hsl():表示色相,饱和度和亮度模式,是一种工业标准色彩模式

    语法:

    hsl(h,s,l)

    h:色相,表示某一种颜色(0-360)

    s:饱和度,色彩的浓度,单位是白分数,0%表示灰色,100%表示纯色

    l:亮度,单位也是百分比,0%表示黑色,100%表示白色

    4,颜色通道

    less中色彩通道的方法:

    red():获取色中的红通道

    green():获取色中的绿色通道

    blue():获取色中的蓝色通道

    alpha():获取色中的透明度通道

    hue():获取色中的色值通道,数字(0-360)

    saturation():饱和度通道,获取色中的饱和度通道,百分数

    lightness():获取色中的亮度通道,结果是百分数

    这七个通道方法都只能接受一个参数,这个参数就是某个颜色

    灰色是有三个相同的通道组成的,值越小灰度越大

    5,颜色操作

    颜色操作类函数,用于处理色彩

    fade();对色彩进行透明度处理

    fade(color,alpha)

    fade(red,0.4)

    fadeIn():表示增加透明度,当第一个参数不是颜色时,得到的是一个16进制不透明的颜色,透明度大于1

    fadeout():透明度减少,可以接受两个参数,第一个表示颜色,第二个表示透明度的变化,是一个百分数

    greyscale():得到混合色灰色颜色值,接受一个表示颜色的参数

    mix:将两种颜色混合,默认情况下取两种颜色的平均值,第三个参数表示取的数组,是百分比,表示色彩混合的权重

    saturate();增加饱和度

    参数1:颜色

    参数2:饱和度的增加量

    desaturate():减少饱和度

    lighten();提高颜色亮度

    参数1:颜色

    参数2:提高的亮度

    darken():降低颜色亮度

    6,色彩的混合函数

    这个函数只做颜色处理,不处理图片

    softlight:柔光处理

    参数1:底色

    参数2:添加色

    hardlight:强光处理

    参数1:底色

    参数2:添加色

     

    一,LESS

    1,字符串方法

    escape(str):将字符串做URL转码

    参数时需要转码的字符串,将空格等号 等字符转义

    e():表示对字符串不做编译

    replace():替换字符串中的子串

    参数1:源字符串

    参数2:被替换的字符串

    参数3:替换的字符串

    2,命名空间

    命名空间是用来约束管理变量的,解决,变量在作用域中混乱的问题,防止变量污染作用域。

    设计模式中单体模式是实现命名空间管理的一种常见设计模式。

    在less中引入了该思想,在less中我们可以通过命名空间来管理变量混合,以及方法

    为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,防止重名的出现,以及更好的管理变量和混合

     

    &:在less中表示该元素,注意,&符号要写在里面

    注意,引用混合时,要将属性赋值给谁就要放在谁的里面

     

    3,作用域

    Less到底是一个什么样的作用域呢?

    在less中,作用域更像是一个块作用域,定在块内部的变量在外界访问不到。

    在less中,访问变量的顺序,就近原则,哪个变量离他近就使用哪个

     

    对于函数,它的存在也是依赖块级作用域,定义在块内部的函数,在外界访问不到,

    但是我们可以通过命名空间使用它。

     

    对于变量,他的存在也是依赖于块级作用域,定义在块内部的变量,我们在外界访问不到,

    但是我们也不能通过命名空间访问。变量更像是一种私有的。

     

    4,文件引入

    如果将css样式全部写在一个文件中很不方便,所以要分开

    利用文件引入,在less之间创建依赖

    语法:

    @import 'filename';

    通过import 导入文件的内容,被导入的文件中的变量,混合,方法等内容在编译后悔留在当前文件中,可以被调用使用

    5,插值

    如果我们需要一个变量插入到一个字符串中,可以使用less的插值处理

    语法:

    @{key} //key 是变量名字

    二,Sass

    1,简介

    SASS 是一种css的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使css的开发变得简单可维护

    sass的本质是一种可以简化css工作流程方式,可以帮助我们更简单的开发和维护css内容

    sass是ruby语言写的,因此电脑需要先安装ruby,mac已经自带了,windows系统需要重新安装环境

    @url:escape('../images/bg.jpg?a=10');

    @url1:e('../images/bg.jpg?a=10');

    .box{

    width: 100px;

    height: 100px;

    background:url(@url);

    -webkit-background-size: 100%;

    //background-color:url(@url1);

    background-size: 100%;

    //background: e('rgb(100,200,50)');

     

    }

    .box::before{

    //只能替换第一个出现的red

    content:replace('this color is red','red','green');

    color:red;

    }

    一般情况sass文件会写为scss:

    sass index.scss index.css

    2,变量与作用域

    变量定义:$key: value;

    作用变量的影响:在作用域内部定义的变量,外部无法访问,是私有的

    3,父选择器

    在sass中可以通过&符号,在父选择器内部访问父选择器

    选择当前选择器

    4,属性嵌套

    sass对css属性进行嵌套,通常是对符合属性进行嵌套

    border-top-color

    ==>

    border:{

    top:{

    color:red;

    }

    left:{

    style:solid;

    }

    }

    在css中,对属性嵌套,当编译时会根据嵌套的层级进行编译结果

    5,混合

    sass中混合作用是为了继承复用

    语法:

    定义:@mixin names {width:100px}

    使用:@include names;

    混合可以传参:(参数默认值)

    定义:@mixin names($w,$h:100px){width:100px;}

    使用:@include names(100px,200px,)

    多参数混合:

    6,继承

    sass中的混合与less中的方法有点像

    sass中的继承与less中的混合有点像

    继承是用来实现对其他类或者元素或者ID样式的继承

    语法:

    @extend 选择器;

    sass不仅仅可以继承元素名称的选择器,还可以继承自定义的元素名称选择器

     

     

     

     

    展开全文
  • less sass

    2018-08-07 20:29:11
    一、LESS 1.条件判断 在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现... 当判断相等时,使用=实现,没有===== 判断多个条件时使用and关键字,配合when使用 when and 判断非语句,使...
    一、LESS
        1.条件判断
            在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现
            在when方法中添加条件时,不需要单位
            当判断相等时,使用=实现,没有==和===
            判断多个条件时使用and关键字,配合when使用    when and
            判断非语句,使用not,    when not
        2.函数-Math
            在less中我们可以像js中使用Math对象一样使用less中的数学函数
            Floor():向下取整(参数可以带单位)
            Ceil():向上取整
            Round():四舍五入
            Percentage():将数值转换为百分数,(参数如果带有%单位是无效的),参数只能是数字
            sqrt():平方根
            abs():绝对值
            sin():sin函数
            asin():arcsin函数
            cos():cos函数
            acos():arccos函数
            tan():tan函数
            atan();arctan函数
            pi():返回π
            pow(a,b):次方 a的b次方
            mod(m,n):m对n取余
            convert(m,n):数字之间的转换
            unit(m,n):不转换情况下替换数字的单位
        3.颜色定义函数
            rgb():可以生产一个16进制的色彩值,标准色彩方法
                语法:rgb(red,green,blue);
                    每个值都是0-255
            rgba():rgba(red,green,blue,alpha)
                红绿蓝透明度
            hsl():表示色相,饱和度,亮度模式,是一种工业标准色彩模式
                语法:hsl(h,s,l)
                    h:色相,表示某一个颜色(0-360)
                    s:饱和度,色彩的浓度,单位是百分数,0%表示灰色,100%表示纯色
                    l:亮度,单位也是百分比,0%表示黑色,100%表示白色
        4.颜色通道
            less中色彩通道的方法:
                red():获取色中的红色通道
                green():获取色中的绿色通道
                blue():获取色中的蓝色通道
                alpha():获取色中的透明度通道
                hue():获取色中的色值通道,数字(0-360)
                saturation():获取色中的饱和度通道,百分数
                lightness():获取色中的亮度通道,结果是百分数
                这七个通道方法都只能接受一个参数,这个参数就是某个颜色
                灰色是由三个相同的通道组成的,值越小灰度越大
        5.颜色操作
            颜色操作类函数,用于处理色彩
            fade():对色彩进行透明度处理
                fade(color,alpha)
                fade(red,0.4)
            fadeIn():表示增加透明度,当第一个参数不是颜色时,得到的是一个16进制不透明的颜色,透明度大于1
            fadeout():透明度减少,可以接受两个参数,第一个表示颜色,第二个表示透明度的变化,是一个百分数
            greyscale():得到混合色灰色的颜色值,接受一个表示颜色的参数
            mix():将两种颜色混合,默认情况下取两种颜色相加后的平均值,第三个参数表示取的数值,是百分比,表示色彩混合的一个权重
            saturate():增加饱和度
                参数1:颜色
                参数2:饱和度的增加量
            desaturate():减少饱和度
            lighten():提高颜色亮度
                参数1:颜色
                参数2:提高的亮度
            darken():降低颜色亮度
        6.色彩混合函数
            这个函数只做颜色处理,不处理图片
            softlight:柔光处理
                参数1:底色
                参数2:添加色
            hardlight:强光处理
                 参数1:底色
                 参数2:添加色
    7.字符串方法
        escape(str):将字符串做url转码
            参数是需要转码的字符串,将空格,等号 等字符转义
        e():表示对字符串不做编译
        replace():替换字符串中的子串
            参数1:源字符串
            参数2:被替换的字符串
            参数3:替换的字符串
    8.命名空间
        命名空间是用来约束管理变量的,解决,变量在作用域中混乱的问题,防止变量污染作用域。
        设计模式中单体模式是实现命名空间管理的一种常见设计模式。
        在less中引入了该思想,在less中我们可以通过命名空间来管理变量混合,以及方法
        为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,防止重名的出现,以及更好的管理变量和混合
    
        &:在less中表示该元素,注意,&符号要写在里面
        注意,引用混合时,要将属性赋值给谁就要放在谁的里面
    9.作用域
        Less到底是一个什么样的作用域呢?
        在less中,作用域更像是一个块作用域,定在块内部的变量在外界访问不到。
        在less中,访问变量的顺序,就近原则,哪个变量离他近就使用哪个
    
        对于函数,它的存在也是依赖块级作用域,定义在块内部的函数,在外界访问不到,
        但是我们可以通过命名空间使用它。
    
        对于变量,他的存在也是依赖于块级作用域,定义在块内部的变量,我们在外界访问不到,
        但是我们也不能通过命名空间访问。变量更像是一种私有的。
    10.文件引入
        如果将css样式全部写在一个文件中很不方便,所以要分开
        利用文件引入,在less文件之间创建依赖
        语法:
            @import 'filename';
        通过import导入一个文件的内容,被导入的文件中的变量,混合,方法等内容在编译后会留在当前文件中,可以被调用使用
    11.插值
        如果我们需要将一个变量插入到一个字符串中,可以使用less的插值处理
        语法:
            @{key}  //key是变量名字
    二、Sass
        1.简介
            SASS 是一种css的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使css的开发变得简单可维护
            sass 的本质是一种可以简化css工作流程的方式,可以帮助我们更简单的开发和维护css内容
            sass 是ruby语言写的,因此电脑需要先安装ruby,mac已经自带了,Windows系统需要重新安装环境
            ruby -v
            //如安装成功会打印
            ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
            //1.删除原gem源
            gem sources --remove https://rubygems.org/
    
            //2.添加国内淘宝源
            gem sources -a https://ruby.taobao.org/
    
            //3.打印是否替换成功
            gem sources -l
    
            //4.更换成功后打印如下
            *** CURRENT SOURCES ***
            https://ruby.taobao.org/
    
            //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
            gem install sass
            gem install compass
            检查版本号
            sass -v
            //更新sass
            gem update sass
            //查看sass帮助
            sass -h
            一般情况sass文件会写为scss
                sass index.scss index.css
                sass index.scss>index.css
        2.变量与作用域
            变量定义:$key:value;
            作用域对变量的影响:在作用域内部定义的变量,外部无法访问,是私有的
        3.父选择器
            在sass中可以通过&符号,在父选择器内部访问父选择器
            选择当前选择器
        4.属性嵌套
            sass 允许对css的属性进行嵌套,通常是对复合属性进行嵌套
            border-top-color ==>
            border:{
                top:{
                    color:red;
                }
                left:{
                    style:solid;
                }
            }
            在css中对属性嵌套,当编译时,会根据嵌套的层级进行编译结果
        5.混合
            sass中混合作用是为了继承复用
            语法:
                定义:@mixin names($w,$h) {width:100px}
                使用:@include names(100px,200px);
            多参数混合:
        6.继承
            sass中的混合,与less中的方法有点像
            sass中的继承,与less中的混合有点像
            继承是用来实现对其他类或者元素或者id样式的继承
            语法:
                @extend 选择器;
                sass不仅仅可以继承元素的名称的选择器,还可以继承自定义的元素名称
    7.解决中文报错
        在ruby中找到engine.rb文件,在该文件require XXXX 后边写上:
            Encoding.default_external = Encoding.find('utf-8')
    8.作用域对混合以及继承的影响
        sass中:
            定义在作用域内部的混合,在外部无法访问,只能在内部访问
            定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到
        less中:
            less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问
            less的方法和sass的混合比较像,less定义在作用域内部的方法,在外部不能直接访问,需要通过命名空间访问
    9.占位符
        我们自定义一个选择器样式,用于继承,继承结束,我们不想要这个选择器了,删掉它
        此时可以使用占位符,表示定义一组临时属性,当 编译结束 就立马被删除
        占位符只能用于标签选择器,其他选择器不能用
        语法:
            %div{}
            %mydiv{}
    10.数字运算
        sass中也有+-*/ 运算,可以进行数字变量之间的运算,可以带单位运算
        带有单位运算时:默认是px,哪个单位在前边,最终结果就以哪个单位为标准
        除法有点特殊:
            1) 加上()
            2) 变量或者是函数的返回结果
            3) 除法运算只是表达式的一部分
            满足以上任何一个条件都可以
    11.色彩运算
        sass中支持色彩的加减乘除,注意除法要满足上边的数学运算中的条件
        16进制的色彩运算,每个通道进行独立运算,
        如果十六进制色彩每个通道的值大于255或小于0,不会影响其他通道,大于255取255,小于0取0
        在rgba下,进行运算时,要求透明度必须一致,否则无法运算,最终结果不会影响透明度
    12.插值与字符串拼接
        插值:
            为了动态创建属性
            语法:
                #{$dir}
        字符串拼接:
            + 拼接两个字符串,没有''
            no + -repeat
            $re:-repeat
            no + $re
    13. if语句
        语法:
            @if 定义if语句
            @else if 定义 else if 语句
            @else 定义 else 语句
            or 或 and 与 not 非
            判断相等使用:== <= >= < >
    14. for循环
        语法:
            @for $i from start through end{
                //循环体
            }
            @for:定义for循环
            $i:循环变量
            start:$i的初始值,包含start
            end:$i的结束值,包括end
            from:从哪里开始
            through:到哪里结束
    15. while循坏
        语法:
            @while 条件 {}
        $i : 0;
        @while $i < 20{
            //循环体
            $i:$i+1;
        }
    16.三元运算符
        if(条件,true结果执行,false结果执行)
    展开全文
  • Less和Sass

    千次阅读 2016-06-11 16:06:13
    CSS预处理器css预处理器基本思想就是用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标...css预处理器为css增加一些编程的特性,无需考虑浏览器的兼容性问题”下面介绍了常用的两种css预处理器Sass Sa
  • Gulp 编译Less和Sass

    2021-04-12 10:38:08
    在实际应用中,我们一般会使用 CSS 的预处理器来编写 CSS 代码,例如 Less Sass 语言,通过将脚本解析成 CSS 的脚本语言,可以减少 CSS 的重复,也可以节省时间。 本节我们来学习如何通过 gulp 将 Less Sass ...
  • Less和Sass的区别

    2020-07-27 12:17:24
    Less和Sass的区别 Less和Sass都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后...
  • 10 分钟入门 Less Sass

    千次阅读 2020-11-04 00:17:08
    第一章 Less和Sass简介 Less和Sass都为动态样式表的语言,即css框架,通过简洁明了的语法定义,使得编写CSS的工作变得非常简单。 第二章 Less 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义...
  • 预处理器Less Sass 是什么?Sass与Scss是什么关系?Less Sass 的区别Less Sass 的使用LessSass Less Sass 是什么? Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 ...
  • less和sass语法

    2020-07-28 22:35:40
    less和sass语法 1.嵌套注意点,&链接 .a { foo: bar; } .a:hover { foo:bar; } ============== .a { foo:bar; &:hover { foo:bar; } } 2.变量 ===sass=== $foo: red; $bar: 10px; .a { color: $...
  • less和sass的区别

    2019-08-22 09:06:39
    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 ...
  • dcss Dcss是一个通过js设置和修改css文件的css内容的库,和LESS,SASS的区别在于Dcss是可以通过js设定变量值,不依赖于服务或工具,不过目前还没有开发LESS和SASS的Mixin这种功能
  • 解析CSS,less和sass

    2019-06-10 10:32:40
    解析CSS,less和sass 安装css-loader,style-loader,less-loader 在webpack.config.js里module里添加以下代码 { test: /.css$/, use: [ 'style-loader', ...
  • 关于Less和Sass的区别

    2020-12-17 10:59:54
    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持...
  • sublime编译less和sass
  • less和sass的区别,你了解多少?】 目录标题一、Less、Sass/Scss是什么?二、less和sass的相同之处三、less和sass的区别 在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1...
  • LESS和SASS入门

    2015-06-02 16:19:00
    LESS和SASS入门 新建项目 项目结构 Less VS2015中已经集成了LESS。 新建Less样式表文件,main.less Package.json中添加gulp-less依赖。 在...
  • less和sass的区别有哪些?下面本篇文章就来给大家介绍一下less与sass的相同点与不同点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一、less与sass分别是什么 1、less Less 是一门 CSS ...
  • Stylus、Less和Sass的区别 CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。 1.什么是 CSS 预处理器 ...
  • 关于less和sass的区别

    2016-08-12 09:13:59
    其实less和sass的语法非常地相似。他们不同的是他们的实现方式不一样。less是基于javascript,是在客户端进行编译解析的;sass是在服务器端就进行编译的。很多人因为less会影响客户端的解析时间。所以不选择less。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,898
精华内容 1,959
关键字:

less和sass