mixin中的分号是有效的Sass语法吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【SassSCSS】预加载器中的“轩辕剑”

Sass/SCSS——预加载器中的“轩辕剑”，这也不是我帮它吹，是它自己说的，下图为例。...和css编写规范有着很大的出入，是不使用花括号和分号的，这点让很多前端pym很难接受。...SCSS (Sassy CSS)：一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。...也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。...混合@mixin 用来分组那些需要在页面中复用的CSS声明，可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。

7654 0

Sass和SCSS之间的不同之处是什么?

因此，Sass样式表使用的是不带括号、不含分号和严格缩进的Ruby类语法，像这样： // Variable !...Sass缩进语法的优点虽然这种语法可能看起来很奇怪，它有一些有趣的观点。首先，它是更短，更容易打字。没有大括号和分号，你不再需要所有的东西。更好。...因为一个错误的缩减可能会破坏整个“.sass”样式表,所以它确保编码始终保持干净且格式良好。有一种编写Sass代码的方法：好方法。但要小心！在Sass中缩进means something。...SCSS语法的优点（对于启动器，它是完全兼容CSS。它意味着，你可以重命名一个“.scss”中的CSS文件并且它将just work。...此外，他们试图坚持更接近于那些在将来可能成为一个有效的CSS语法（故@ directives）。因为SCSS与CSS兼容，这意味着很少没有学习曲线。语法是已知的：毕竟，它只是有一些额外的CSS。

9682 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS预编译技术之SASS学习经验小结

因为,实在是太强大了. sass学习有一个网站很好 sass入门 - sass教程这个网站全面的提供了sass的各种基础语法.如果想要学习和理解这些语法,去这个网站学习一下即可....: center 这让我很郁闷,以至于我都想要放弃SASS,因为每次都输入一个分号会让我崩溃的.后来我明白到底是为什么了....因为sass分为两个版本,一个是sass,其特点是使用严格的缩进来控制,省略掉了分号和花括号(肯定是Python程序员的主意-_-); 另一个版本是scss,这个版本,是使用花括号和分号的,更接近我们这些本来就是前端工程师的人的使用习惯...如果你看了上面的给出的入门教程,或者本身就会sass你可能会有一个疑问,为什么是.cf ,不应该是 %cf 吗? 你说的没错....如果是%cf 这种方式,那么,如果文档中没有哪里调用了它,那么它是不会输出的.也就是说,那样更合理.

4722 0

sass入门学习篇（二）

从语法开始但是语法也不是一两句的事情，首先看基本的导入，使用一，sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，建议scss....比如基础的文件命名：_mixin.scss导入的时候可以省略下划线写成：@import "mixin" 三，注释 sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释...default表示默认值,sass是没有局部变量的 1，普通变量 $f:12px; body{font-size:$f;} 2,默认变量 $f:12px !...default; body{ font:#{$f}/#{$s}; } 　　作值这里有点不明白，不能直接写成font：$f/$s;这样吗？...5，多值变量，有两种：list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

5222 0

09-移动端开发教程-Sass入门

Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。当然浏览器是不认识Sass语法。...开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。...Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...//文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 body...Sass中的变量和注释 5.1 定义变量及使用 Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。

1.8K6 0

09-移动端开发教程-Sass入门

Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。当然浏览器是不认识Sass语法。...开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。...Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...//文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 body...Sass中的变量和注释 5.1 定义变量及使用 Sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。

2.3K9 0

vue2.0以上版本安装sass(scss)

一、首先说明sass和scss的区别。 1、异同：1）简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。...语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号　　　　　2）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名　　　　　...3）语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。...嵌套变量 $color : #111111; 混入 @mixin 继承 @extend 3、一个关于@mixin、@extend、%placeholder的适用场景总结 mixin 可以传变量 extend...--save-dev //安装sass-loader cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader

2.6K3 0

CSS预处理器的对比 — sass、less和stylus

CSS预处器有成千上万的特性,在本文中我们将一一介绍。让我们开始。语法在使用CSS预处器之前最重要的是对语法的理解，幸运的是，这三种CSS预处器的语法和CSS都差不多。...sass和less sass和less都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认sass使用.scss扩展名，而less使用.less扩展名。...重要的一点是，sass也同时支持老的语法,就是不使用花括号和分号，而且文件使用.sass扩展名，他的语法类似于： /* style.sass */ h1 color: #0982c1 stylus...stylus的语法花样多一些，它使用.styl的扩展名，stylus也接受标准的CSS语法，但是他也接受不带花括号和分号的语法，如下所示： /* style.styl */ h1 { color:...sass /* Sass定义了一个名叫error的mixin，这个error设置了一个参数“$borderWidth”,在没特别定义外，这个参数的值是默认值2px*/ @mixin error($borderWidth

4.7K7 0

CSS预处理——Sass

Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的...在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。...@include调用混合宏在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词@include来调用声明好的混合宏。...这也是 Sass 的混合宏最不足之处。继承@extend Sass中是通过关键词 @extend来继承已存在的类样式块，从而实现代码的继承。...solid #ccc; padding: 6px 10px; font-size: 14px; } 占位符 % Sass 中的占位符 %placeholder 功能是取代以前 CSS 中的基类造成的代码冗余的情形

1.5K1 0

CSS预处理器入门：SassSCSS的实用指南

Sass/SCSS 简介Sass/SCSS 基本语法实作CSS 预处理器的由来在过去，CSS 的基本语法与核心机制一直没有太多变化，大家普遍认为 CSS 的功能就是定义样式属性与排版，是一个入门简单的工具...旧版的 Sass 采用 Ruby 语言编写，最初为了配合 HAML（一种缩排式的 HTML 模版语法）的写法，也设计成缩排式的写法，所以在 Sass 的语法中不写大括号及分号，像是以下这一段 Sass...后来受到 Less 影响，Sass 发展出兼容 CSS 的新语法就称为 SCSS，也就是说在 SCSS 中直接撰写 CSS 也是完全没有问题的，因为在 SCSS 的语法中有大括号及分号，以前面的例子像是这样...mixin 可以说是 Sass 中一个强而有力的写法，甚至它还可以搭配 @content 的写法传入整段 CSS，想要看更多 mixin 的例子的话可以参考 Bootstrap 中 mixin 的代码...共用（Extends）有一种状况是当有一个选择器需要包含另一个选择器中的所有样式，或是许多选择器具有相同样式时，为了避免要一直重写同一组相同的 CSS 样式，在 Sass 中我们可以使用 Extends

1611 0

CSS 预编译语言 Sass 快速入门教程

为了解决上述问题，出现了很多 CSS 预编译语言，CSS 预编译语言是基于 CSS 语言的语法扩展，除了能解决上述缺乏语言特性带来的问题之外，还支持嵌套书写，减少重复输入父级选择器（可理解为 CSS 中的继承机制...Sass 具有两种不同的后缀名分别对应两套语法，最早 Sass 使用的是缩进式语法，使用缩进来区分代码块，并通过分号将具体样式分开，这种语法以 .sass 作为后缀；另一种使用了和 CSS 一样的块语法...混合（Mixin）有的时候，我们可能有一段 CSS 样式代码需要在多个地方使用，这可以通过 Sass 提供的混合（Mixin）功能来实现，定义混合代码的时候需要在选择器前面加上 @mixin 标识，引用混合代码的时候需要通过...4、结语好了，通过以上语法的介绍相信你已经具备了编写 Sass 样式文件的能力，在基于 Laravel + Vue.js 驱动的项目中，我们通常会在两个地方编写样式代码，一个是 resources/sass...目录下独立的 .scss 文件，另一个是 Vue 组件中的中，我们在属性中设置 lang="scss" 表示这里面是 Sass 代码，需要 Laravel

7.2K4 1

scss,less,stylus这些css处理器该怎么选择

Sass与SCSS Sass是预处理器的鼻祖，它诞生于2006年，很多后来的预处理器都从它这里借鉴了大量思想。到目前为止，它具有两种单独的语法：Sass和SCSS。...是的，Sass和SCSS只是Sass的两种语法，其中SCSS是在Sass第三个版本中引入的，它采用了和之前不一样的语法。 Sass和SCSS之间的主要区别在于，SCSS与CSS一样使用分号和方括号。...这不仅意味着学习它会很快上手，而且还可以使用在Less中有效的任何预编写CSS代码。Less CSS预处理器本身是用JavaScript编写的，这也简化了设置。...另一方面，Sass允许您使用if语句并将其插入选择器和属性名称中。它的语法还包含三元运算符和嵌套收集器。 Less的另一个小缺点是使用@符号进行变量声明（Sass使用$符号代替）。...Stylus是用Node.js编写的，因此对于那些已经熟悉nodejs环境的人来说是一个不错的选择。同时它也具有内置函数和mixin。

8271 0

Scss学习笔记，持续记录

基础知识 1.Sass 语法格式 Sass 有两种语法格式。...SCSS (Sassy CSS) 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能，以 .scss 作为拓展名。...另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...不转换今天遇到自定义的css变量中，使用scss变量或者函数是，不会被编译（例如rgba函数、或者一个变量编译成css后没有变化）。

9711 0

SASS第一篇认识它

两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号 .scss以{}表示层级结构, 语句后面需要写分号...企业开发中推荐使用.scss结尾注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符 <!...方式*/ /*@mixin 意思是代表可以使用@mixin这个语句的内容引用到多个选择器中.重复使用把....@include 指令可以将混入（mixin）引入到文档中。...意思是可以将@mixin里面的语句引用到@include所在的地方. */ /*下面是scss文件*/ /*mixin center{ position: absolute; left:

4303 0

如何使用SASS编写可重用的CSS

可以把预处理器看作是一个加工的机器，一端允许我们编写独特的语法，另一端，预处理器帮我们生成对应的常规的 CSS。...SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。...2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。...css 中“>”是 css3 中特有的选择器，A > B 表示选择 A 元素的所有子B元素，与A B不同的是，A B 选择所有后代元素，为A > B只选择一代。...color: #fff; } 由于历史原因，连字符和下划线被认为是相同的，也就是说 @mixin mixin-name { } 和 @mixin mixin_name { } 是一样的。

7.7K2 0

sass

，所以我们经常会看到一个标签上存在很多的样式类名，在这种模式中我们需要时常关注css优先级，避免样式的重叠覆盖.....css，然后再拿过来使用，我们把它叫做预处理 less、sass的编译有两大类第一类：基于node环境编译less 第二类：基于浏览器环境 less、sass是一门新的语法，不能被浏览器直接识别，...只是方便我们开发用的，最终我们需要把他们编译成正常的css，浏览器识别css Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。...1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;...版本 gem uninstall sass//卸载sass（不要点） ws配置路径：program：C:\Ruby23-x64\bin\sass.bat mixin @mixin alert($color

1.5K1 0

Sass-学习笔记【基础篇】

Sass用“.sass”后缀为扩展名；　　SCSS用“.scss”; （2）.语法书写方式不同。　　Sass以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”。　　...书写Sass的时候不带有大括号和分号，其主要的依靠严格的缩进方式来控制; 而css就是有大括号和分号，必不可少；而且缩进方式没有那么严格的要求，甚至可以不用缩进。...".sass"只能使用Sass的老语法规则（即严格的缩进规则，且不带分号和大括号） “.scss”使用的是Sass的新语法规则，也就是SCSS语法规则（类似CSS语法格式） 6-2：sass注释 http...：可重用的代码块，可以看做是Sass中的函数，在Sass中，用"@mixin"来声明一个混合宏。...所以，#{}语法并不是随处可用，你也不能在 mixin 中调用： @mixin updated-status { margin-top: 20px; background: #F00;

4.9K5 0

Sass初体验

SASS (Syntactically Awesome Stylesheets Sass)SASS 是一套利用 Ruby 实现的，最早最成熟的 CSS 预处理器，诞生于 2007 年它扩展了 CSS 语言...，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展关于学习 SASSLess 是一套利用 JavaScript 实现的 CSS 预处理器，诞生于 2009 年由于 Less...的诞生比 Sass 要晚，并且 Less 受到了 Sass 的影响，所以在 Less 中能看到大量 Sass 中的特性所以只要学会了 Less 就等同于学会了大部分的 SassLess 和 Sass...} 表示层级结构，语句后面需要写分号企业开发中推荐使用 .scss 结尾，注意点：如果需要使用考拉编译 sass 文件，项目目录结构中(包含文件名)不能出现中文和特殊字符，就拿着之前在 less 文章当中的一个示例...，一个父子结构的 div 元素，用 less 文件的方式设置它们的样式现在换成用 sass 来进行编写代码如下，首先来看以 .sass 后缀结尾的方式：创建 index.sass@mixin center

1664 0

前端菜鸟之SASS入门笔记

Sass 是成熟、稳定、强大的 CSS 扩展语言。sass是需要编译的，sass不能直接用于页面。它可以提高编程效率（对于使用熟练的人来说）。 sass想要应用在项目中需要编译成css文件。用考拉！...sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。...而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。...参考链接： Sass中文网：https://www.sass.hk/ 中文文档：http://sass.bootcss.com/ 一、变量 sass中可以定义变量，可以统一维护。...声明的@mixin通过@include来调用。 sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

5832 0

React中的setState是异步的吗？

对比Vue Vue的数据更新是基于event-loop 机制（是更新，不是数据双向绑定）。 ?...React.setState()中的异步更新 setState()中有个特别重要的布尔属性isBatchingUpdates（默认为false,），它决定了state是同步更新还是异步更新。...setState调用.png setState 只在合成事件和钩子函数中是“异步更新”的。异步更新的背后，是同步代码处理（"合成事件和钩子函数"的调用在"更新"之前）。...React.setState()中的同步更新当然，也是有办法同步获取state更新后的值： setTimeout等异步操作中调用setState函数 DOM原生事件利用setState回调函数函数式...后面两个方法，是React本身提供的。要注意的是，setState回调函数要在render函数被重新执行后才执行。下面有一道题目，试试做吧！

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭