nuxt sass 全局变量的问题_Sass入门教程

SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,有助于减少CSS的重复,节省时间。 它是更稳定和强大的CSS扩展语言描述文档的风格结构。sass中文网

而且Sass算是CSS的超集,它100%兼容CSS的语法,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是:如果你喜欢,可以在Sass文件中完全以CSS的语法来写代码,它也是完全支持的。

SASS程序有3种使用方式:

作为命令行工具作为独立的Ruby模块作为任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件

Sass安装

Sass的安装分为2步:

  1. 安装Ruby,sass程序基于Ruby所以需要先安装Ruby
  2. 安装Sass程序

安装Ruby

从Ruby官网下载对应你电脑版本的安装包,然后按照步骤一步一步安装到你的电脑上(安装过程中记得勾选Add Ruby executablesto your PATH,免去安装后再去配置的烦恼)。完成安装后,在你的命令行程序中输入 ruby -v验证是否安装成功:

ruby -v #验证版本号#ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32] 

如果出现对应的版本号说明安装成功,那么你就可以进行下面的操作了。

安装Sass

安装完Ruby后,打开命令行工具,输入以下命令安装sass程序:

gem install sass #gem是Ruby命令sass -v #验证sass是否安装成功

如果打印出版本号,说明我们安装成功!

上述是一种官方安装的方法,有时候官方提供的安装方式可能是最简洁的,但也有可能不是最快速的,所以下面介绍另外一种镜像安装,速度会相对快一些:

gem sources --remove #移除自带源gem sources -a https://gems.ruby-china.org/ #安装RubyChina的源gem sources -l #查看当前的源gem install sasssass -v 

Sass编译

所有准备工作完成后,就可以开始sass的编译。

编辑sass文件

打开编辑器,首先创建一个index.scss文件,然后保存好,内容如下:

index.scss文件

$color:yellow;$font:18px;$background:red;body { color:$color; background:$background; font-size:$font;}

生成css文件(命令行版)

打开命令行工具,切换到index.scss文件所在目录,执行以下命令:

sass index.scss index.css#把名为index的Sass文件转换为CSS文件。#每次有更新保存之后,都需要执行这个命令。

为了更方便操作,我们可以监听这个文件,然后就省去了每次保存都要重新生成的麻烦。

sass --watch index.scss:index.css#`--watch`参数加上之后,可以监测index这个文件的变化,更新保存之后自动编译。

多文件(文件夹)监听命令:

sass --watch sass/main:dist/css#监视sass目录下main文件夹中的所有Sass文件,并自动编译为CSS文件之后,放到dist/css目录下。

逆向操作,css文件转换为sass/scss文件:

sass-convert index.css index.sasssass-convert index.css index.scss

生成css文件(编辑器版)

有些人可能就觉得上面的命令操作有些繁琐,有没有更简便的方法呢,答案是肯定的,毕竟能人太多。我们可以通过编辑器插件的方式,自动编译成css文件。

作为一个前端开发,我经常用到的编辑器就是sublime text,然而sublime中就有两个比较好用的sass编辑插件:Sass(Sass语法高亮)和Sass Build(编译)。非常之好用。如果不知道具体的插件安装方法,请自行百度,节约时间,就是在珍惜生命!

完成好scss文件后,保存,快捷键Ctrl+B,就会在同一个文件夹里面生成对应的css文件和css.map文件。是不是省略了很多麻烦(就是这么任性)。

编译结果

上面两种方式都可以生成对应的css文件,生成的css文件如下:

index.css

body{ color:#ff0; background:red; font-size:18px}/*# sourceMappingURL=index.css.map */

可以看到生成的css文件只包含CSS代码,Sass源文件中设置的变量已经被处理了。

/*# sourceMappingURL=styles.css.map */`表示映射文件是styles.css.map,映射文件记录了源文件到css文件的映射信息。

sass@import导入

sass提供导入机制,可以将页面的共用较为通用的scss提取出来,这样方便维护,其他页面按需导入相关的scss文件,避免了所有的样式都在一个样式文件中,一个样式文件较为繁重难以维护。

scss文件中引入scss文件

css3的@import,在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。 如:@import url("style/index.css");css3中的@import可能会造成延迟加载,有的地方没有样式。

sass @import解决了这个问题,它能将多个scss合并为一个。 如:@import "index.scss"。

index.scss文件中导入index2.scss文件

#index.scss文件$color:yellow;$font:18px;$background:red;@import 'index2.scss';body { color:$color; background:$background; font-size:$font; width: $width; height:$height;}
#index2.scss文件$width:100px;$height:100px;body{ font-family:"Times New Roman",Georgia,Serif;}
/*生成后的index.css文件*/body{ font-family:"Times New Roman",Georgia,Serif}body{ color:#ff0; background:red; font-size:18px; width:100px; height:100px}/*# sourceMappingURL=index.css.map */

用法:可以在被引入的文件中定义默认值,主文件@import这个文件后,如果主文件中变量有定义,就不会被覆盖。

sass入门用法

语法与注释

Sass中的注释有3种://我是单行注释不会出现在编译之后任何格式的CSS文件中。/*我是多行注释*/只会出现在编译之后代码格式为expanded的CSS文件中。/*!我是强制注释*/会出现在任何代码格式的CSS文件中。
//使用大括号的方式布局,类似于cssbody { color:red; background:#fff;}div{ }

变量和嵌套

变量是Sass中最基本的语法。凡是css属性的标准值(比如说1px或者bold)可存在的地方,都可以替换为变量。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。 通过 $ 符号来定义,通过变量名称实现多处重复引用。(注:变量名中连字符和下划线等效,$primary_color 与 $primary-color是同一个变量)

$color:yellow; //定义变量$font:18px; //定义变量$background:red; //定义变量body { $width:180px; //定义局部变量 $header-color: orange !global; //可以在选择器中使用 !global 标志定义全局变量。 color:$color; //引用变量 background:$background; //引用变量 font-size:$font; //引用变量 border:1px solid $color; //多个属性值时引用变量 width:$width; //引用变量}div{ color:$header-color;}//编译成css文件body { color:yellow; background:red; font-size:18px; border:1px solid yellow; width:180px;}div{ color:orange;}

sass可以嵌套设置样式,这样比css方便了很多:

div{ p{ color:$color; a{ font-size:$font; } } span{font-size:$font;}}//编译成css文件div p{color:yellow;}div p a{font-size:18px;}div span{font-size:18px;}

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于:hover的伪类,就需要用到 & 这个连接父选择器的标识符:

div { p { margin-bottom: 1.4px; &:hover { color: #999; } }}//编译成css文件div p { margin-bottom: 1.4px; }div p:hover { color: #999; }

操作符

Sass操作符(或运算符)包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符:

==等于!=不等于

除了等号运算符之外,每种数据类型还支持各自的一组操作符。

数字操作符

SassScript支持以下标准的算术操作符:

+加-减*乘/除%取模

算术运算符的一个常见用法是宽度计算。

例如,下面的例子计算宽度百分比:

.container {  width: 100%; }article { float: left; width: 700px / 960px * 100%;}.sidebar { float: right; width: 200px / 960px * 100%;}

经过编译输出以下CSS代码:

.container { width: 100%; }article { float: left; width: 72.91667%; }.sidebar { float: right; width: 20.83333%; }

使用算术操作符时,参与运算的数据单位必须相同。否则会报错(例如,一个用px,另一个用em):

 .box-big { font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'. width: 30% - 20px; // Error: Incompatible units: 'px' and '%'. }

颜色操作符

算术操作符也适用于颜色。计算颜色时,参与运算的是R, G, B分量,而不是整个六位数颜色值。

例如,当把两个十六进制颜色值相加时,将依次把每一对分量值相加。

示例:

body { color: #991100 + #002299;}

经过编译输出以下CSS代码:

body { color: #993399; }

还可以对颜色和数字应用运算符。例如

body { color: #112233 * 2;}

经过编译输出以下CSS代码:

body { color: #224466; }

写到这里,无不感慨sass的强大以及技术发展的迅速。到这里入门sass也绰绰有余了。后续会有进阶文章继续!

d9a3bfacfbec697c8b0527029df9c719.png
15b2729860938b44da360608d3efc7f5.png
ccbd251b749680e959e369def670f0ba.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript对象包含哪些要素_javascript有哪几种对象?

JavaScript中支持3种对象:内置对象(原生对象),浏览器对象,自定义对象。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。对象包含两个要素:1、用来描述对象特性的一组数据,也就是若干变量,…

用C语言实现优先级排序和MATLABsort函数的比较

为了实现对两个数组进行优先级排序,用c语言有两种实现方法, 一是需要对两个数组进行排序,然后对排序后的坐标再排序,(求最小值是我自己需要) 二是直接寻找数组排序后的元素坐标,调用qsort函数进行排序,排序后的数组会存放在原数组中,那么就有两种寻找坐标,一是寻找…

造成内存泄漏_如何造成内存泄漏

造成内存泄漏这将是一个相当邪恶的职位-当您确实希望使某人的生活陷入困境时,您将在谷歌上搜索。 在Java开发领域,内存泄漏只是您在这种情况下会引入的错误类型。 为您的受害者保证几天甚至几周的办公室不眠之夜。 我们将在这篇文章中描述两次泄漏。 两…

寄存器分配图着色_寄存器分配

寄存器分配,是通过将程序变量尽可能地分配到寄存器,从而提高程序执行速度的一种方法。寄存器是编译器优化中最为重要的问题之一(好的寄存器分配能够提高程序执行速度超过250%);也是编译器理论中最热点的研究领域之一(研究界已经提出来大量寄存…

通过Java,Spring Boot应用程序将Gmail用作SMTP服务器

Gmail用户可以使用Gmail的SMTP服务器smtp.gmail.com从其Spring Boot应用程序发送电子邮件。 为此,让我们在应用程序中进行一些设置: 在application.properties文件中提供SMTP连接属性: spring.mail.hostsmtp.gmail.com spring.mail.username…

在建工地扬尘在线监控系统推荐_配电室为何需要安装蓄电池在线监控系统?保定钰鑫电气...

配电室蓄电池在线监控系统提高了蓄电池运行质量、增强了电力系统的安全运行、保障蓄电池运行环境的可靠,打造无人值守配电室、智能化运维模式,减少蓄电池损耗、浪费,降低了维护成本,为何需要安装一套配电室蓄电池在线监测系统&…

最好的Java开发人员测试和集成工具

通过从应用程序中学习企业APM产品,发现更快,更高效的性能监控。 参加AppDynamics APM导览! 无论您是刚开始还是已经使用了一段时间,使用正确的工具进行编程都可以对项目的成功产生巨大的影响。 适当的工具使您可以编写更好的代码…

最速下降法matlab全局最小值_梯度下降概念

1、梯度概念(1)从几何意义上讲,就是函数变化最快的地方。在单变量的函数中,梯度只是导数,其实就是函数在某个给定点的切线的斜率;在多变量函数中,梯度是一个向量,向量有方向,梯度的方向就指出了…

jpa querydsl_JPA – Querydsl投影

jpa querydsl在我的上一篇文章中: JPA –基本投影 –我提到了构建JPA投影的两种基本可能性。 这篇文章为您带来了更多示例,这次基于Querydsl框架。 注意,这里我指的是Querydsl版本3.1.1。 重塑构造函数表达式 看下面的代码: ...…

同步服务老是报错_悬而未决:MYSQL配置好主从同步后没有报错,但数据一直没有同步过来是什么原因? | 学步园...

我是用下面的步骤来配置主从数据库服务器(都是MYSQL 5.1.47)的:1、在主服务器上FLUSH TABLES WITH READ LOCK;然后再复制数据库文件到从服务器。2、在主服务器上创建同步用户账号rsyncuser。修改my.cnf开启主服务器上的bing-log,没有指明binlog-do-db&am…

IntelliJ中的远程调试Wildfly应用程序

远程调试Java应用程序意味着使用本地开发环境连接到远程运行的应用程序。 Java开箱即-agentlib:jdwp[options]支持远程调试:目标应用程序必须使用-agentlib:jdwp[options]选项执行, -agentlib:jdwp[options]选项加​​载Java调试线协议(jdwp&…

云桌面 瘦终端_云桌面选择云终端还是瘦客户机?

我们发现最近很多用户在部署青椒云桌面的时候,经常会出现这么一种情况,那就是不知道是该选择云终端还是瘦客户机而不断纠结的,云终端和瘦客户机到底有什么不同的呢,为什么经常会有很多用户因为不知道如何选择它们而感到纠结的呢&a…

cordic ip核 vivado_Xilinx Vivado CORDIC IP求解atan 反正切

赛灵思官方提供了cordic(coordinate rotational digital computer) ip核实现直角坐标极坐标变化,三角函数的操作。我介绍下它进行反正切求解的使用:新建个简单工程:bd如下进行ip设置,选择运算位反正切后,ip端口回自动变…

检测和测试停滞的流– RxJava常见问题解答

假设您有一个流以不可预测的频率发布事件。 有时您可以预期每秒会有数十条消息,但是偶尔几秒钟都看不到任何事件。 如果您的流是通过Web套接字,SSE或任何其他网络协议传输的,则可能会出现问题。 静默时间过长(停顿)可以…

linux 远程挂载摄像头_如何实现嵌入式Linux下USB摄像头视频采集

展开全部在linux下所e5a48de588b662616964757a686964616f31333337613134有设备都是文件。所以对摄像头的操作其实就是对文件的操作。USB摄像头的设备文件就是在/dev目录下的video0(假如只有一个摄像头)。在linux下操作摄像头就是使用v4l2对摄像头进行视频的操作,操作…

Effective Java第三版有哪些新功能?

自从听说即将出版的有效Java 第三版以来,我一直想知道其中有什么新内容。 我假设将涵盖自Java 6以来引入Java的功能,的确如此。 但是,第三版Java开发人员经典版也有一些其他更改。 在本文中,我提供了有关在第三版中添加&#xff0…

es管理kabina_小白学ES 05 - 通过Kibana管理集群服务

目录前述步骤:① 启动Kibana;② 通过浏览器访问Kibana;③ 进入Dev Tools(开发者工具)界面.1 检查集群的健康状况ES提供了一套_cat API, 可以查看ES中的各类数据.# 查询API:GET /_cat/health?v# 响应信息如下:epoch timestamp cluster status node.total node.data shards pri …

+h eclipse中ctrl_Eclipse 常用的快捷键都有哪些?

今天,小编大概整理了 几 组 Eclipse 的快捷键,希望对你有帮助。1、打开资源CTRL SHIFT R:打开所有类型文件,不包括 JAR 包; CTRL SHIFT T:打开 Java 类型文件,包括 JAR 包;2、查…

apache.camel_Apache Camel 2.11发布

apache.camel上周Apache Camel 2.11发布了。 这篇博客文章总结了最引人注目的新功能和改进。 有关详细说明,请参见Camel 2.11发行说明 。 1)新组件 与往常一样,每个新版本都包含许多新组件,这些组件是由我们庞大的用户群贡献的。…

c向文件中插入数据_Redis从文件中批量插入数据

简介在redis中,有时候需要批量执行某些命令,但是在redis的redis-cli下,只能一条条的执行指令,实在太麻烦了!想到这,你是不是蓝瘦香菇? 如果能将要执行的指令一行行存储到文件中,然后…