Scss-监听和数据类型

最新推荐文章于 2022-10-12 10:38:26 发布
最新推荐文章于 2022-10-12 10:38:26 发布
阅读量658 收藏
点赞数
分类专栏： Scss 文章标签： sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rayshaan/article/details/111149045
版权
本文介绍了Sass中的文件监听方法(node-sass)，以及详细阐述了Sass的数据类型，包括变量定义、作用域，以及字符串、数字、颜色、布尔值、数组、映射等类型的特点和使用示例。
摘要由CSDN通过智能技术生成

2020.12.14 04:03

Scss

00.监听文件(node-sass)

创建.scss文件，使用命令node-sass 名字.scss 名字.css
在这里插入图片描述

在命令行中scss文件同目录下输出node-sass -w a.scss
会默认生成a.css(未压缩版css文件)和a.min.css(压缩后的css文件)
在这里插入图片描述
在scss文件里编写会同步编译到css文件中

01.单行注释和多行注释

  • scss文件里单行注释不会被编译到css文件里
  • scss文件里多行注释会完整的被编译到css文件里

scss文件:
在这里插入图片描述
css文件:
在这里插入图片描述

02.变量的定义、使用和作用域

定义:$变量名:值 例如:$color:red;
使用:在选择器中调用即可
scss文件:
在这里插入图片描述
编译后的css文件:
在这里插入图片描述
作用域:拥有块级作用域
在这里插入图片描述
在app里定义一个变量background-color，在app里可以正常调用
在body里调用会报错，未定义的变量
在这里插入图片描述
想要把局部变量变为全局变量，在值后面加! global
scss文件:
在这里插入图片描述
编译后的cs

最低0.47元/天 解锁文章
11adaacc
关注
专栏目录
scss 导入重复执行多次_SCSS — 缩减50%的样式代码
weixin_39606048的博客
11-20 595
作者: feishi123 https://github.com/fengshi123/blog/issues/8前言Sass是CSS3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改HTML标签，并编译出标准的CSS代码用于各种生产环境。Sass语法比较简单，难点...
Scss笔记
LiuKairui的博客
11-27 454
目录什么是SASS安装和使用基本用法代码的重用高级用法 作者：阮一峰 什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。 假定你已经安装好了Ruby，接着在命令行输入下面的命令： gem
SCSS监听命令行
weixin_41983426的博客
03-06 402
1.监听单个文件 sass --watch scss文件.scss:输出的css.css 例如 sass --watch input.scss:output.css 2.监听文件夹 sass --watch 监听的scss目录:输出的css目录 例如 sass --watch scss:dist/css
2020-12-10
weixin_53460385的博客
12-10 107
加粗样式
scss语法
MISS_zhang_0110的博客
08-04 2095
SASS允许用户编写自己的函数。
sass的类型判定
weixin_33929309的博客
06-27 124
由于sass的作者是rubyer，因此它的类型与JS有点不一样，但一样可以类推。 @charset "utf-8";//必须设置了这个才能编译有中文的注释 $gray: #333;//颜色 $number: 12;//数字 $boolean: true; $array:(); $string:"string"; $string2: 'string'; $null:nul...
css通过全局设置类名自定义控制样式
m0_52009348的博客
10-12 883
css通过全局设置类名自定义控制样式
ToDoList:使用原始JavaScript和SCSS的简单待办事项列表
04-22
首先，JavaScript的基本结构包括变量声明（`var`, `let`, `const`）、数据类型（如字符串、数字、布尔值、对象等）、条件语句（`if...else`）、循环（`for`, `while`）、函数定义以及事件处理。在这个待办事项列表中...
form-validation:JavaScript html和CSS进行表单验证
03-15
这通常通过监听表单元素的事件（如`onsubmit`、`onchange`等）来触发验证函数，一旦检测到无效数据，可以立即向用户显示错误信息，防止数据被错误地发送到服务器。 HTML是构建表单的基础，我们可以通过定义不同的`...
scss快速入门
weixin_34242819的博客
06-03 452
在使用scss之前，我们要知道Sass、Scss有什么不同？ SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件，官方解释。 传统的css文件缺失变量等概念，导致需要书写的重复的代码很多。我写JS的习惯是遇见重复的代码就要思考是否可以抽出来写成一个可复用的方法，但css...
sass-scss
02-14
sass-scss
判断是否有包含指定的class
u011117693的博客
12-20 2031
html代码： js代码： var type = $('div').is('.a') 获得true，包含这个class， var type = $('div').is('.c') 获得false，不包含这个class，
Sass自定义边距类名
qq_42768522的博客
05-20 298
$max: 200; @for $i from 0 to $max { .ma#{$i} { margin: #{$i}px; } } @for $i from 0 to $max { .mx#{$i} { margin-left: #{$i}px; margin-right: #{$i}px; } } @for $i from 0 to $max { .my#{$i} { margin-top: #{$i}px; margin-botto..
SCSS 日常用法
EmotionComputer
04-18 1179
官方文档 你需要了解的 less 和 sass 是两种 css 预编译语言，就是说通过 less 或者 scss 写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件，都能使用 变量、运算符、判断、方法等等。 scss 与 sass 的区别（这里先不讲 less ）： 先有的 sass 后有的 scss scss 需要大括号{}和分号; sass 什么都不用直接...
Sass的控制命令（判断、循环）
YYece的博客
06-01 3804
Sass中控制命令指的是@if、@each、@for和@while。具有一定的逻辑判断和循环遍历能力，这个对于懂JavaScript或者后端语言的同学来说一点都不难。但在CSS中是不可思议的一件事情，最起码到目前为止是不太可能的事情。但在Sass这样的CSS预处理器语言中实现了。 @if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else
Sass不同样式风格的输出方法
糖长老莫小贝的博客
03-09 283
[Sass]不同样式风格的输出方法 1.嵌套输出方式 nested 2.展开输出方式 expanded 3.紧凑输出方式 compact 4.压缩输出方式 compressed 1.嵌套输出方式 nested Sass 提供了一种嵌套显示 CSS 文件的方式。例如 nav { ul { margin: 0; padding: 0; list-style: none...
Scss学习--Scss逻辑运算
hide_in_darkness的博客
07-23 2568
逻辑运算 scss支持±*/等逻辑运算 这里着重讲解+和/ 除法 只有在以下三种情况中scss才会把 / 视为除法运算符号： 如果值，或值的一部分，是变量或者函数的返回值 如果值被圆括号包裹 如果值是算数表达式的一部分*/ p{ height: 10px/8px; width: (10px/2) ; padding:2px + 8px/2; $margin-social:10px; $margin-image:5px; margin-top: $margi
Scss----@-Rules和控制指令
qac的博客
12-15 716
2020.12.14 23:50 Scss01.@-Rules----@import02.@-Rules----@media03.@-Rules----@extend04.其余指令05.控制指令----逻辑判断06.控制指令----循环 01.@-Rules----@import Sass扩展了@import的功能，允许其导入SCSS或SASS文件。被导入的文件将合并编译到同一个CSS文件中，另外，被导入的文件中所包含的变量或混合指令(mixin)都可以在导入的文件中使用 通常，@import寻找Sass
Vue 的样式绑定和 Sass 快速入门 （七）
d2235405415的博客
03-21 2949
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因此，在将`v-bind`用于class 和style时，Vue 做了专门的增强。本章将对此做详细的说明并额外推荐在项目中使用`Sass`提升样式的编码效率
Vue社区论坛开发实战：源码+文档全套
在该项目中，JavaScript被用于实现论坛的动态交互，如内容更新、数据处理以及事件监听等功能。掌握ES6+的新特性对提高开发效率和代码质量至关重要。 3. Sass/SCSS预处理器 Sass（SCSS）是一种CSS预处理器，它增加...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值