Sass新手指南-程序员宅基地

技术标签: ruby  

本文根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass,以及作者相关信息

——作者:Andrew Chalkley

——译者:大漠

什么是Sass?

Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的。它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式。

例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼)。

本文将介绍Sass的一些基本概念,比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

Sass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

如下面的CSS:

#skyscraper_ad { 
  display: block; 
  width: 120px; 
  height: 600px; } 
#leaderboard_ad { 
  display: block; 
  width: 728px; 
  height: 90px; }

在Sass中,上面的CSS代码你要写成下面这样:

#skyscraper_ad 
  display: block 
  width: 120px 
  height: 600px 
#leaderboard_ad 
  display: block 
  width: 728px 
  height: 90px

Sass使用两个空格来定义嵌套的区别。

你现在看过了Sass是如何书写的,接下来我们一起看一些Sass方面的介绍,让Sass在你手中变得不再可怕。

变量(Variables)

在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

$red: #ff4848

Sass还内置了函数功能,例如变暗(darken)和变亮(lighten),他们可以帮助你修改变量。

在这个例子中,段落要使用一个比“h1”标签更深的红色,就可以这样使用:

$red: #ff4848$fontsize: 12px
h1
  color: $redp
  color: darken($red,10%)

你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑,我们也可以在变量的基础上减一个十六进制的颜色,例如“#101”。如果我们想把字号调大“10px”,我们也可以在字号的变量基础上加上这个值。

/*加法和减法*/color: $red - #101font-size: $fontsize + 10px

嵌套(Nesting)

Sass有两种嵌套规则:

选择器嵌套

选择器嵌套是Sass嵌套规则中的第一种。

Sass的嵌套类似于你的HTML嵌套:

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

如果你看了Sass生成的CSS,你可以看到“.name”嵌套在“.speaker”内,这里生成的CSS选择器是“.speaker .name”。

.speaker .name {  font-weight: bold;
  font-size: 22px;}	.speaker .position {  font-size: 12px;	}

属性嵌套

属性嵌套是Sass嵌套的第二种

相同前缀的属性,你可以进行嵌套:

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上面的例子中,我们有一个“font:”,在新的一行增加两个空格放置他的属性(通常我们看到的是使用连字符“-”来连接)。

因此我们先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就变成了“font-weight:”属性。

.speaker .name {  font-weight: bold;
  font-size: 22px;}	.speaker .position {  font-size: 12px;	}

所有连字符的选择器都支持。

这种嵌套用来组织你的CSS结构是非常棒的,可以让你不在写一些重复的代码。

混合(Mixins)

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。

使用关键词“@mixin”来定义Sass的混合,你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数,你还可以将参数设置到这些代码片段中;如果你需要设置默认值,你也可以在混合的代码片段中设置默认值。

调用混合代码片段,可以使用Sass中的关键词“@include”调用,并在其后面跟上你的混合代码片段的名称,你还可以使用括号,在里面设置一些参数。

来看一个简单的例子:

@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amounth1  @include border-radius(2px)
.speaker  @include border-radius

上面的Sass代码将转译成下面的CSS代码:

h1 {  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;}	.speaker {  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;}

我们给“h1”元素指定了一个特定的圆角值,但是并没有给“.speaker”指定任何值,因此他将使用的是默认值“5px”。

选择器继承

选择器的继承可以让你的选择器继承另一个选择器的所有样式风格,这是一个非常优秀的特性。

使用选择器的继承,要使用Sass的关键词“@extend”,后而跟上你需要继承的选择器,那么这个选择器就会继承另一个选择器的所有样式。(当然他们是有继承和被继承的关系)

h1  border: 4px solid #ff9aa9.speaker  @extend h1
  border-width: 2px

上面的Sass代码将转译成下面的CSS代码:

h1,.speaker {  border: 4px solid #ff9aa9;}.speaker {  border-width: 2px;}

尝试Sass

网上尝试

如果你的本地电脑没有安装Sass,你可以在网上尝试使用。

在转译之前,你需要选择底部的“Indented Syntax”选项。

安装

Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:

gem install sass

Sass也可以使用命令行工具将Sass文件转译成CSS文件。

你可以键入“sass --watch sass_folder:stylesheets_folder”,这个时候你的Sass文件(文件扩展名必须是.sass)stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录,当然你的sass文件必须保存在这个文件目录中。“--watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

CSS转换成Sass

在现有的项目中通过“sass-convert”使用sass。

在终端进入你的目录中,键入“sass-convert --from css --to sass -R .”。将CSS转换成Sass。其中“-R”表示递归,“.”表示当前目录。

Scss

在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

总结

在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。

那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass

中文译文:http://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html

转载于:https://my.oschina.net/xihun/blog/203283

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chuzhilin8720/article/details/100907656

智能推荐

如何使用Google Colab免费算力训练自己的模型_google colab算力-程序员宅基地

文章浏览阅读4.5k次。登录GoogleDriverhttps://drive.google.com/drive/my-drive需要科学上网安装Colaboratory插件,并新建Colaborator,如下图右键我的云端硬盘—>选择更多—>选择关联更多应用—>搜索Colaborator插件并安装。新建Colaborator连接Google drive首先在单元格中输入并执行以下命令!apt-get install -y -qq software-properties-common pyt._google colab算力

Storyboard全解析-第二部分-程序员宅基地

文章浏览阅读1.8k次。转自原创网址:http://www.dasheyin.com/ios_kai_fa_jiao_cheng_storyboard_quan_jie_xi_-_di_er_bu_fen.html如果你想了解更多Storyboard的特性,那么你就来对了地方,下面我们就来接着上次的内容详细讲解Storyboard的使用方法。在上一篇《iOS开发教程:Storyboard全解析-第一部分》

python箱线图matplotlib plt.boxplot()调整异常点的大小_plt.boxplot 设置异常点-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏4次。plt.rcParams['boxplot.flierprops.markersize'] = 1 # 默认为6更多设置请参看这里_plt.boxplot 设置异常点

python tfidf特征变换_Python中的TfidfVectorizer参数解析-程序员宅基地

文章浏览阅读1k次。vectorizer = CountVectorizer() #构建一个计算词频(TF)的玩意儿,当然这里面不足是可以做这些transformer = TfidfTransformer() #构建一个计算TF-IDF的玩意儿tfidf = transformer.fit_transform(vectorizer.fit_transform(corpus))#vectorizer.fit_trans..._e 'min_df' parameter of tfidfvectorizer must be a float in the range [0.0, 1

从Pytorch模型pth文件中读取参数成numpy矩阵_pth转为tensor-程序员宅基地

文章浏览阅读4.3k次,点赞2次,收藏13次。目的:把训练好的pth模型参数提取出来,然后用其他方式部署到边缘设备。Pytorch给了很方便的读取参数接口:nn.Module.parameters()直接看demo:from torchvision.models.alexnet import alexnetmodel = alexnet(pretrained=True).eval().cuda()parameters = model.parameters()for p in parameters: numpy_para _pth转为tensor

错误 找不到符号android编译,Android Studio 打开已有项目,编译出错,提示“错误: 找不到符号”的解决方法...-程序员宅基地

文章浏览阅读1.5k次。在开发过程中,经常会遇到多人、异地协同工作的模式。鉴于每个人使用的Android Studio版本不同、gradle环境的不同,我们可能会遇到打开别人的项目编译不过的问题。对于Android Studio的这个臭毛病,如果遇到了真的还挺烧脑。比如下面这种报错:> Task :app:compileROWDebugJavaWithJavac FAILEDE:\Source\test\Setup..._找不到符号 类 nonnull

随便推点

蓝桥杯单片机比赛工程头文件引用reg52.h和STC15F2K60S2.h的区别_蓝桥杯单片机头文件用什么型号-程序员宅基地

文章浏览阅读5.3k次,点赞12次,收藏47次。蓝桥杯单片机比赛中,创建工程时,我们可以创建两种工程来对我们的单片机进行编程:一种是创建Atmel的8052工程,然后引用头文件reg52.h。另一种是创建STC的STC12F2K60S2工程,然后引用头文件STC12F2K60S2.h。这两种工程对于使用蓝桥杯的板子,都可以正常使用,但是又有一些区别,我们接下来研究的就是它们的区别所在。在STC12F2K60S2.h中有上图这样的描述,..._蓝桥杯单片机头文件用什么型号

html中怎么用link引入css,css中link与@import引入css文件用法区别-程序员宅基地

文章浏览阅读2.7k次。很多WEB前段可能都会有两种在页面加导入css文件的方法,一种我们常用的在网页中直接link加入,另一种还可以在页面中@import引入css文件,下面我来给大家介绍css中link与@import引入css文件用法区别1 网页中引用外部CSS的两种方式网页中引用外部CSS文件有两种方式:link和@import,两者引用的方式在页面上的展现效果是一样的。link引用方式如下:@import引用方..._link引入css

2020年你不应该错过的CSS新特性-程序员宅基地

文章浏览阅读637次。@argyleink在第四次的伦敦(LondonCSS 2020)CSS活动中分享了一个有关于CSS特性相关的话题。看了一下这个主题的PPT,里面有些新东西还是蛮有意思的。基于该PPT,..._css gap属性

EF Core5.0中使用备用键(Alternate Keys)替代主键作为被外键关联的目标列_ef hasalternatekey 会生成什么脚本-程序员宅基地

文章浏览阅读822次。EF Core5.0备用键(Alternate Keys)替代主键作为被外键关联的目标列假设项目中已经定义了这样一个Entity(映射SysDictionary表并已经提交到数据库):/// <summary>/// 系统字典表/// </summary>[Table("SysDictionary")]public class SysDictionary{ [Key] public int Id { get; set; } [StringLength(50)] _ef hasalternatekey 会生成什么脚本

免费下载全套资源+开源课程 | 图书《Python编程:从数据分析到数据科学》的全部配套资源...-程序员宅基地

文章浏览阅读1.9k次。本书按照作者朝乐门老师提出的“开源课程(Open-Source Course,OSC)行动倡议”,为高校教师提供开源社区,并以开源课程模式共同建设与维护课程资源,当然,读..._朝乐门 从数据分析到数据科学电子书

Nuscenes数据集转换voc_xml格式用于yolov4训练_nuscenes yolo-程序员宅基地

文章浏览阅读1.7k次,点赞4次,收藏25次。1、下载nuscenes数据集数据集下载地址https://www.nuscenes.org/download,这里下载v1.0-mini为例。2、转换nuscenes的json格式(3D转2D)nuscenes数据集采用的是三维框标注的格式,因此需要先将3D标注框转化为2D格式。下载官方工具nuscenes-devkit需要使用到的文件是:/nuscenes-devkit/python-sdk/nuscenes/scripts/export_2d_annotations_as_json.py该文_nuscenes yolo

推荐文章

热门文章

相关标签