css之Sass

sass跟less一样都是动态的样式表语言,但sass的功能更强大一些。不管使用哪一种,他们都是使编写 CSS 的工作变得非常简单。

基本功能就不介绍了,它与less相似,列举一些区别就好。

1.导入样式

  • 关键字 @import
  1. 直接css文件 @import "index.css";
  2. 直接sass文件 @import "index"; 可以省略后缀名,但注意的是sass合并sass文件

2.方法:

  1. 声明变量的时候,变量必须在前面;有利于后期的修改和维护;
  2. !default;默认时使用这个值,而想修改的时候就在前面修改;
  3. #{需要的值},转译;
  4. 多值变量,使用时取下标,下标从1开始;
  5. map $map
  6. each循环
  7. & 父元素
  8. @at-root跳出父元素
  9. @mixin定义 @include使用
  10. @extend 继承 父元素 
  11. 判断@if

3.sass less 变量的差别:

  • less局部不会影响全局变量,而sass的局部变量则会影响全局变量。
时间: 2024-10-14 00:10:32

css之Sass的相关文章

前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂的名称. 应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小. 通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义. 区分他们,使他们具有特殊意义,通常需要为“帮手”. 尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义, 语

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的-可以说是格式化插件,依赖nodejs 获取CSScomb–这不是今天的话题 官方网站: CSScomb 支持许多编辑器,比如Sublime/Atom/brackets等 第三方CSScomb-这才是今天的话题 昨天写了篇CSS3的文章-发现代码有点混乱..人力排版有点--.所以跑去atom插件库寻找csscomb Atom -> s

前端css框架SASS使用教程(转)

一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了SASS的主要用法.我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了. 二.安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了. 2

CSS框架-SASS

学过CSS的人都知道,它不是一种编程语言.你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句... 学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事. 很自然地,有人就开始为CSS加入编程

[React] {svg, css module, sass} support in Create React App 2.0

create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr webpack loader to wrap SVGs in React components as a named export. This let’s you either grab the filename from the default export or grab a wrapped S

CSS之 sass、less、stylus 预处理器的使用方式与区别

更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490 使用变量: sass:  使用 $ 符号定义变量,如: $base_color: #efefef  less: 使用 @ 符号定义变量,如:@base_font_size: 16px stylus: 对变量没有任何设定(变量不能以@符号开头),变量之间可以使用 “=”, “空格”或者 “:”,如:  base_font_color: red,   border

支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)

旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sass和less都有提供一个map文件,这个文件是用来干嘛的呢? .map文件是一个json格式的文件,可以直接调试less/sass源文件. ======================================================== 先是less配置(sass配置基本与less一

CSS预处理器SASS学习总结

写在前面的话:如果你css写了很多了,不妨换一种方式来写写css,也许会提高效率,SASS是我比较喜欢的一种.css本来就不是太难,所以也仅仅介绍SASS常用的用法,避免复杂化,后续用到新的东西,可以再进行拓展. ======正文开始====== 我们可以通过一种类似css的编程语言编写代码,保存为.scss后缀名的文件,然后使用SASS进行处理为css文件,而这种.scss文件中可以有变量.嵌套等功能,有些编程的味道:同时.scss文件也能够通过SASS处理为压缩的.缩进的等不同风格的css代

Sass编译css/Grunt压缩文件

Sass安装(mac) $ sudo gem install sass scss编译成css文件 $ sass ui.scss ui.css CLI安装 $ npm install -g grunt-cli Grunt安装 $ npm install grunt Grunt入门 package.json { "name": "my-project-name", "version": "0.1.0", "devDepe