当前位置: 首页 > Web前端 > HTML

Sass简介

时间:2023-04-02 22:15:54 HTML

sass?SASS是一个CSS开发工具,提供了很多方便的编写方法,大大节省了设计者的时间,使CSS开发变得简单易维护。?SASS的本质是一种帮助您简化CSS工作流程并帮助您更轻松地维护和开发CSS内容的方法。环境搭建及编译说明?要在Windows平台上安装Ruby,首先需要有Ruby安装包。可以到Ruby官网(http://rubyinstaller.org/downloads)下载对应的Ruby版本。?Ruby安装文件下载完成后,您可以按照应用软件安装步骤安装Ruby。安装过程中,个人建议安装在C盘下,安装过程中选择第二个选项(不选择则编译时找不到Ruby环境),如下图:?Ruby安装完成后,在开始菜单中找到刚刚安装的Ruby,启动Ruby的Command控制面板,如下图所示:?在您的计算机上安装好Ruby之后,接下来就可以安装Sass了。同样,Windows下安装Sass的方法也有很多种。但是这些方法都很简单,你只需要在你的命令终端输入一行命令即可。?通过命令安装Sass打开电脑命令终端,输入以下命令:geminstallsass?温馨提示,使用Mac时,可能需要在上述命令前加上“sudo”才能正常安装:sudogem安装sass?如果不能正常安装sass??gemsources--removehttps://rubygems.org/?gemsources-ahttps://ruby.taobao.org/[如果您的系统不支持https,请将淘宝源替换为:gemsources-ahttp://gems.ruby-china.org]?gemsources-l?geminstallsass?detectSass?sass-v?升级sass版本的命令行行为?gemupdatesass?卸载(删除)sass:gemuninstallsass?基本用法?Sass提供了四种编译样式选项:?nested:嵌套缩进的css代码,这是默认值?expanded:不缩进,展开的css代码?compact:简洁格式的css代码?compressed:压缩的css代码sassimport?css本身包含一个命令@import,但是CSS中的@import每次执行都会发送一个新的请求,会消耗一定的资源。该命令在SASS中进行了扩展,将included编译成一个CSS文件,将included切成小块(partials)进行处理。对于像Partials这样的文件,命名约定以下划线开头,这样的SCSS文件不会被编译成CSS文件。Partials用于定义公共样式或组件样式,专门用于其他SCSS文件导入使用的.sass嵌套?Sass也提供了选择器嵌套,但这并不意味着你在Sass中嵌套是无限的,因为更深你嵌套,编译后的CSS代码的选择器层级会越深,这往往是人们不愿意看到的。这个特性现在被很多开发者滥用了。?选择器嵌套为样式表作者提供了一种通过本地选择器相互嵌套实现全局选择的方法。Sass中有三种嵌套类型:?选择器嵌套?属性嵌套?伪类嵌套(理解)?选择器嵌套sass变量定义?SASS中的变量必须以$符号开头,后面是变量名,变量名和变量值之间必须用冒号隔开:(参考CSS属性和值语法的设置),如果值后面加[!default],表示默认值。要引用变量的值,直接使用变量名来引用定义变量的值。?普通变量:定义后可在全局范围内使用?默认变量:sass默认变量需要在值后加!default来标识?默认变量覆盖:在默认变量前后,只需重新声明变量并赋值value?默认变量是根据组件开发的流程进行优化?特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果将该变量作为属性使用或者其他特殊情况,必须使用#{$variable}来调用。?#{$varialbe}是一种特殊形式的值,适用于特殊用途。?sass判断语句?@if指令是SASS中的一条控制指令,用于当表达式满足条件(true)时输出指定样式,当条件不满足(false)或表达式为null时输出other@ifcondition的样式{//条件为真时执行的样式}同样,@elseif和@else指令的组合也可以用来判断多个条件*?sassarray/map(理解)*?list表示一个列表,CSS中type的值是一串表示属性的值。列表中的值可以用空格或逗号分隔,例如?border:#cccsolid1px;该值是一个列表?font–family:Courier,“LucideConsole”,等宽字体;该值也是一个列表?该列表可以包含其他列表,例如:?padding(10px5px)(5px5px);可以用括号分隔,这些括号将在编译成css时被删除?map是一个列表,列表项中有名称?$map:(key1:value1,key2:value2,key3:value3)$var(key1:value1,key2:value2..):声明一个Maplength($map):获取map中元素对的个数Map-get($map,key):获取$map中名为key的value?map-keys($map):获取指定$map中的所有key?map-values($map):获取指定$map中的所有keyvalue?map-has-key($map,key):判断是否包含指定keyin$map?map-merge($map1,$map2):将$map1和$map2合并在一起?map-remove($map,key):从$map中删除具有指定名称的键?sass循环语句*?@for指令在SASS中用于重复处理一组指令?有两种表达形式?@for$varfromthrough@for$varfromtoBothtoandthrouch代表一个区间,唯一不同的是循环停止的地方不同$var可以是任意变量名比如$i,是SASS表达式,必须是整数?@each在SASS中主要用于列表或者循环映射数据?主要表示:@each$varin?$var可以是任意变量名,是SASS表达式,必须是列表。?sass-mixin函数(宏)?在sass中可以通过@mixin来声明Mixing,并可以传递参数。参数名以$开头,多个参数用逗号分隔。@mixin的混合代码块由@include调用。?sass-function介绍?函数的作用主要是数据在SASS中,一些值可以交给函数处理,具体的处理方式由定义函数的具体设计决定。?@function函数名(参数列表){//数据处理}sass继承?SASS允许一个选择器继承另一个选择器。比如已有的class1:  .class1{    border:1pxsolid#ddd;  }要继承class1,class2必须使用@extend命令:  .class2{    @extend.class1;    font-size:120%;  <---------------------------------end---------------------------------------------->