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

    2020-06-17 20:23:06
    sass和less 都是css预处理器,目的旨在提高和增强css的能力 sass 概述:sass基于Ruby,原来Ruby环境,使用前必须安装Ruby环境,可以理解为scsss的严格模式,全兼容css。是一款最早且最成熟的css预处理器(性能超强...

    sass和less

    都是css预处理器,目的旨在提高和增强css的能力

    sass

    概述:sass基于Ruby,原来Ruby环境,使用前必须安装Ruby环境,可以理解为scsss的严格模式,全兼容css。是一款最早且最成熟的css预处理器(性能超强)
    他可以使用变量、常量、嵌套、混入、函数等功能
    他有两套语法规则:1.用缩进作为分隔符来区分代码 2.用{} 作为分隔符(此规则就是scss,在scss3之后都支持这套语法)

    sass的导入

    1. 导入其他sass/scss文件,可忽略文件后缀,编译方式为被倒入文件共同编译成一个csss文件。
    @import 'main'
    
    1. 导入css文件,不可忽略文件后缀,编译后作为单独文件存在,在被导入文件中依旧是以@import 'main.css'方式存在
    @import 'main.css'
    

    在一下吧情况下,@import仅作为普通css语句,不会导入到任何sass文件共同编译成一个css文件

    • 文件拓展名为.css
    • 文件名以http://开头
    • 文件名是url()
    • @import 包含media queries

    注释

    两种方式:

    • 标准注释 /* */
    • //单行注释 (这种注释方式的内容不会被编译出来)

    样式嵌套

    .class1{
    	font-size:20px;
    	.class2{
    		color:yellow;
    	}
    }
    

    结构严谨,更容易排查样式问题

    变量以$开头,类似js中的变量

    $color:yellow;
    .class{
    	background-color:$color;
    }
    

    Mixins(混合@mixin)

    可重用性高,可以注入任何东西(在css和scss中有效的任意内容,包括函数、变量等)
    注意:

    • 可以互相调用,但不能拿自己调自己,形成递归
    • 通过include引用
    • ab-c 与 ab_c 被认为等同的模块名称
      作用: 自定义想复用的样式模块
    /*定义:*/
    @mixin button{
    	font-size:16px;
    	color:blue;
    }
    
    /*使用:*/
    .model_btn{
    	@include button;
    	background-color:yellow;
    }
    
    /*编译后:*/
    .model_btn{
    	font-size:16px;
    	color:blue;
    	background-color:yellow;
    }
    

    @extend

    继承一个选择器
    类似与@mixin,但@mixin更加灵活

    /*使用:*/
    .a{
    	color:yellow;
    }
    .b{
    	@extend .a;
    	font-size:12px;
    }
    /*编译后:*/
    .b{
    	color:yellow;
    	font-size:12px;
    }
    
    

    function

    自定义函数
    注意: 每个函数都需要有返回值

    /*使用:*/
    @function add($r){
    	@return $r*2	
    }
    .a{
    	font-zise:#{add(8)}px;
    }
    
    /*编译后:*/
    .a{
    	font-size:16px;
    }
    

    &父选择器

    /*使用:*/
    .div{
    	&:hover{
    		cousor:pointer;
    	}
    }
    /*编译后:*/
    .div{}
    .div:hover{
    	cousor:pointer;
    }
    

    组合连接 #{}

    变量连接字符串

    /*使用:*/
    $name:foo;
    $attr:border;
    p.#{ $name }{
    	#{ $attr }-color:blue;
    }
    
    /*编译后:*/
    p.foo{
    	border-color:blue;
    }
    

    计算

    /*使用:*/
    p{
    	margin:20px+30px;
    	width:100px-50px;
    	height:50px*2;
    	font-size:20px/2;
    }
    /*编译后:*/
    p{
    	margin:50px;
    	width:50px;
    	height:100px;
    	font-size:10px;
    }
    

    循环

    三种方式:@for @while @each

    /*@for方式*/
    @for $i from 1 to 10{
    	.a5_img#{$i}{
    		background-image:url('images/img#{$i}.png');
    	}
    }
    
    
    /*@while方式*/
    @while $j > 0{
    	.a5_img#{$j}{
    		background-image:url('images/img#{$j}.png');
    	}
    	$j:$j - 1;
    }
    
    
    /*@each方式*/
    @each $item in 1,2,3,4,5{
    	.a5_img#{$item}{
    		background-image:url('images/img#{$item}.png');
    	}
    }
    
    

    if语句

    @mixin bgcolor($b){
    	@if($b == 5){
    		background-color:yellow;
    	}
    	@else if($b == 4){
    		background-color:blue;
    	}
    	@else{
    		background-color:#fff;
    	}
    }
    

    less

    不需要Ruby环境,安装即可用

    定义变量

    以@开头

    	.class1{	
    		color:@color;
    		width:100px;
    		height:100px;
    	}
    

    样式嵌套

    	.class1{
    		width:100px;
    		height:100px;
    		.class2{
    			width:50px;
    			height:50px;
    		}
    	}
    

    样式的运算

    	@width:100px;
    	.class1{
    		width:@width/2; //除法
    		height:50px;
    		color:#222 + #333; //#555,单纯加法
    		background:darken(#ff6b4d,10%); //背景色加深10%
    		line-height:25px*2; //50px  乘法
    	}
    

    颜色计算:加法与减法相同,但数值如果超出000~fff,则计算结果举例最近的000或者fff

    传参

    	.class1(@width:100px){
    		width:@width;
    		height:100px;
    	}
    

    函数

    1. 如Math数学函数:round(2.5),cell(7,4),floor(2.6),percentage(0.5),min(…),max(…)等
    2. color颜色函数
      darken(@color,10%),aturate(@color,10%),lighten(@color,10%)等
    3. 混合(misc)
      image-size(‘file.jpg’) //返回图像的尺寸
      image-width('file.jpg) //返回图像的宽度
      convert(9s,‘ms’) //单位转换
    4. 字符串(string)
      replace(‘Hi Tom?’,‘Tom’,‘Jack’)//Hi Jack
      replace(‘Hi Tom?’,’(Tom).$’,‘new $1.’) // Hi new Tom
    5. 列表(List)
      @list:‘A’,‘B’,‘C’,‘D’
      length(@list) //4
      extract(@list,3) // C

    总结:

    • sass需要Ruby环境,是在服务端处理编译的
    • less不需要环境配置,在前端提前将代码进行编译转成css使用
    1. 变量符号不同,sass是$,less是@
    2. sass支持太哦件语句,可以使用IF{},ELSE{},FOR{},而less不行
    3. sass提供4种输出设置
      NESTED(默认) 嵌套锁进的csss代码
      COMPACT 展开的多行css代码
      COMPRESSED 简介格式的css代码
      EXPANDED 压缩后的css代码

    暂时总结到这里

    展开全文
  • Sass和Less

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

    什么是Sass和Less?

          Sass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢?

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

           转化成通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用”。

     


     

     为什么要使用CSS预处理器? 

         作为前端开发人员,大家都知道,Js中可以自定义变量,而CSS仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。

           CSS有具体以下几个缺点:

    • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
    • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

           这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。

           但是,CSS预处理器也不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。

           所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,CSS预处理器有没有解决更大的麻烦。

    原文:https://www.cnblogs.com/roashley/p/7731865.html

    展开全文
  • sass和less

    2017-08-10 15:59:00
    sass和less具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”为五大基本特性。 sass和less都是css预处理器,用编程思想...

    一、相同点

    • sass和less具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”为五大基本特性。
    • sass和less都是css预处理器,用编程思想来设计网页。

    二、不同点

    • sass基于ruby,是在服务器端处理的;less基于JavaScript,是在客户端处理的。
    • sass安装,需要ruby。less安装分为客户端安装和服务端安装,客户端安装需要引用一个less.js即可,服务端安装需要安装nodejs,然后用npm安装less。
    • sass声明变量用$,less声明变量用@。
    • sass支持条件循环语句,less不支持。
    • sass提供4种输出选项,less没有输出设置。
    • sass有工具库Compass,less有UI组件库bootstrap,bootstrap3是less,然而bootstrap4变成sass了。
    • sass的功能比less强大,基本可以说是一种真正的编程语言了。less则相对清晰明了,易于上手,对编译环境要求比较宽松。
    • sass出生早2010年,比较成熟,less2011年流行人气也不错。

    转载于:https://www.cnblogs.com/camille666/p/sass_less_similar_diff.html

    展开全文
  • SASS LESS

    2014-08-05 10:20:50
      SASS用法指南: http://www.ruanyifeng.com/blog/2012/06/sass.html   LESS: http://less.bootcss.com/

     

    SASS用法指南:

    http://www.ruanyifeng.com/blog/2012/06/sass.html

     

    LESS:

    http://less.bootcss.com/

    展开全文
  • Sass和Less入门到精通,2天的视频教程,帮助全面理解Sass和Less。百度云视频分享。
  • 了解sass和less

    2020-01-12 18:13:48
    1. 简述sass和less? 都是css预编译处理器,
  • Sass和Less(预处理器)一、了解Sass和Less二、Sass和Less 语法2.1 注释2.2 语法 一、了解Sass和Less Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS,一个基于 Node.js 的预处理器,因著名 CSS...
  • Sass和Less的区别?

    2019-07-02 01:14:00
    1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less? 什么是Sass和LessSass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预...
  • Sass和Less的比较

    2020-11-27 17:12:25
    Sass和Less的比较 不同之处 1、Less环境较Sass简单 Cass的安装需要安装Ruby环境,Less基于JavaScript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中...
  • Sass和Less的区别

    2019-02-20 14:42:20
    什么是Sass和Less? 答:Sass和Less都属于CSS预处理器;所谓CSS预处理器,就是用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用。 为什么要使用CSS预处理器? 答...
  • 1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less? 什么是Sass和LessSass和Less都属于CSS预处理器,那什么是 CSS 预处理器呢? CSS 预...
  • sass和less是什么?

    千次阅读 2019-05-20 10:34:11
    这里是修真院前端小课堂,每篇...【sass和less是什么? 】 1.背景介绍。 sass和less是什么? 1.1.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护...
  • 聊聊 sass less

    2021-04-08 23:12:28
    聊聊 sass less ```c 他们是 CSS 预处理器。他是 CSS 上的⼀种抽象层。他们是⼀种特殊的语法/语⾔编译成CSS 。 例如 less 是⼀种动态样式语⾔. 将CSS赋予了动态语⾔的特性,如变量,继承,运算, 函数 less ...
  • sass和less的理解

    2020-07-26 22:22:38
    sass和less都是对css进行预处理 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 sass 是基于ruby环境 less的后缀是.less ...
  • 主要介绍了在Create React App中启用Sass和Less的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 关于Sass和Less牵扯的问题 关于Sass和Less Sass和Less都算是一种编程语言(后面会详谈此处牵扯出来的编程语言),都是CSS预处理器,都具有相同的功能,可以帮助我们快速编译CSS代码, 细一点来说:Sass是一...
  • sass和less的异同

    2019-01-07 08:32:53
    sass和less都是Css的预处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和webpack等前端构建工具使用。 差异 1、less...
  • Sass和Less?及语法?

    2020-01-16 01:12:29
    Sass和LessSass和Less都属于CSS预处理器,Css预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,如:变量、语句、函数、继承等概念。将CSS作为目标生成文件,然后...
  • 什么是CSS预处理器?Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量、常量以及一些编程...目前比较流行的两种预处理器是Sass和Less。至于他们谁更优秀一些:简短的答
  • sass和less 视频教程

    2017-12-28 10:57:32
    包括了sass以及less这两门预处理语言的完整视频教程,看完这些视频,css成神都不是问题了
  • 有时因为代码需要,需要同时使用sass和less,现将本人的一点经验心得分享给大家。 1.首先建议安装淘宝镜像,如已安装可跳过 命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.如项目中已...
  • vue中使用sass和less的方法

    千次阅读 2018-08-13 17:05:00
    sass和less都是css的预编译处理语言,两者各有优势,需要根据实际需求来选择使用哪一个。 关于这两者,摘取一段描述: 首先sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,...
  • 在 Create React App 中启用 Sass Less 本文介绍了如何在 Create React App 脚手架中启用 Sass Less。 前言 关于创建 create-react-app 项目请查看:create-react-app 的安装与创建。 关于在 less sass...

空空如也

空空如也

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

sass和less