精华内容
下载资源
问答
  • Less和Sass的区别

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

    Less和Sass的区别

    Less和Sass都属于CSS预处理器,那什么是 CSS 预处理器呢?
    CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。

    一、Less和Sass分别是什么:

    1. Less(Leaner Style Sheets) :
      是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
      链接: Less官网.

    2. Sass(Syntactically Awesome StyleSheets):
      Sass 是一款强化 CSS 的辅助工具,它在 CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
      链接: Sass中文网.

    二、Less和Sass相同:

    1. 混入(Mixins)——class中的class;
    2. 参数混入——可以传递参数的class,就像函数一样;
    3. 嵌套规则——Class中嵌套class,从而减少重复的代码;
    4. 运算——CSS中用上数学;
    5. 颜色功能——可以编辑颜色;
    6. 名字空间(namespace)——分组样式,从而可以被调用;
    7. 作用域——局部修改样式;
    8. JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

    三、Less和Sass的不同:

    1. Less是基于JavaScript,是在客户端处理的。
      Sass是基于Ruby的,是在服务器端处理的。

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

    3. 输出设置:
      Less没有输出设置
      Sass提供4中输出选项:nested, compact, compressed 和 expanded

    4. 条件语句:
      Less不支持条件语句。
      Sass支持条件语句,可以使用 if{} ,else{}, for{} 循环等等。

    展开全文
  • less和sass的区别

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

    在介绍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

     

    @length: 100px;
    @color:red;
    @opa:0.5;
    @border:10px solid red;
    .borderRadius(@brWidth:10px){
      border-radius: @brWidth;
    }
    .setMargin(lefts,@width){
      margin-left:@width;
    }

     

    >>>变量使用原则:

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

    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事件

    section {
      p {
        color: red;
        background-color: yellowgreen;
        text-align: center;
      }
      ul {
        padding: 0px;
        list-style: none;
        li {
          float: left;
          margin: 10px;
          width: 100px;
          text-align: center;
          border: @border;
          &:hover {
            background-color: yellow;
          }
        }
      }
    }

    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;
    }
    展开全文
  • less sass的区别

    2021-06-12 11:58:59
    什么是Sass和LessSass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预处理器定义了一种新语言,其基本思想是,用一种专门编程语言,为 CSS 增加了一些编程特性,将 CSS 作为目标生成文件,...

    什么是Sass和Less?

     Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢?
     CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将  CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。
     转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用”。
    

    区别 :
    ①sass有变量和作用域。

    • 变量有全局和局部之分,并且有优先级。

    ②sass有函数的概念;

    • @function和@return以及函数参数(还有不定参)

    ③进程控制:
    -条件:@if @else;
    -循环遍历:@for @each @while
    -继承:@extend
    -引用:@import

    ④数据结构:

    其余的也有string、number、function等类型

    4、Less与Sass处理机制不一样

    5、关于变量在Less和Sass中的唯一区别就是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的区别

    2019-08-17 19:29:35
    一、LessSass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。 2、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
    eg:

    变量使用原则:
    多次频繁出现的值、需要修改的值,设为变量

    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事件
    eg:

    2、Sass:

    1、Sass中的变量
    使用 $变量名:变量值,声明变量;

    如果变量需要在字符串中嵌套,则需使用#加大括号包裹;
    border-#{$left}:10px solid blue;

    2、Sass中的运算,会将单位也进行运算,使用时需注意最终单位
    例:10px10px=100pxpx

    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循环结构:
    @for $i from 1 to 10{} 不包含10;
    @for $i from 1 through 10{} 包含10;

    7、while循环结构:
    $j:1;
    @while KaTeX parse error: Expected '}', got '#' at position 13: j<10{ .while#̲{j}{
    border:#{$j}px solid red;
    }
    j:j:j+1;
    }

    8、each循环遍历
    @each item in a,b,c,d{
    //item表示每一项
    }

    9、函数:
    @function func($length){
    length1:length1:length*5;
    @return KaTeX parse error: Expected 'EOF', got '}' at position 10: length1; }̲ 调用:func(10px);…param1…){
    //使用…将传进来的所有参数,接收到一个变量中
    border-radius:param1;webkitborderradius:param1; -webkit-border-radius:param1;
    }

    展开全文
  • 关于Less和Sass的区别

    2020-12-17 10:59:54
    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 (支持...
  • less和sass的区别,你了解多少?】 目录标题一、Less、Sass/Scss是什么?二、less和sass的相同之处三、less和sass的区别 在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1...
  • less和sass的区别有哪些?下面本篇文章就来给大家介绍一下less与sass的相同点与不同点。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 一、less与sass分别是什么 1、less Less 是一门 CSS ...
  • Stylus、Less和Sass的区别 CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。 1.什么是 CSS 预处理器 ...
  • 在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一、Less、Sass/Scss是什么? 1、Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。 Less 既可以在客户端上运行 ...
  • 关于less和sass的区别

    2016-08-12 09:13:59
    其实less和sass的语法非常地相似。他们不同的是他们的实现方式不一样。less是基于javascript,是在客户端进行编译解析的;sass是在服务器端就进行编译的。很多人因为less会影响客户端的解析时间。所以不选择less。...
  • 前人种树,后人乘凉。借鉴大神笔记。 http://www.cnblogs.com/StephenJiang/p/4607100.html
  • 这个周学习了Less和Sass这两个css框架,我基本了解了它们...Less和Sass的相同之处: 1.变量:可以单独定义一系列通用的样式,在需要的时候进行调用。 2.混合(Mixins):class中的class(讲一个class引入到另一个c...
  • less和sass都是css预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器兼容性问题,例如你可以在 CSS 中使用变量、简单程序逻辑、函数等等在编程语言中一些基本技巧,可以让...
  • less和sass都是css的一种预处理器。 转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用”。 sass和less的区别 1、Less环境较Sass简单...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 312
精华内容 124
关键字:

less和sass的区别