有时,需要定义一套公共样式 ,使用占位符选择器%foo,然后通过 @extend 指令引入,尤其是在制作 SCSS 样式库的时候,在需要时引入,希望 SCSS 能够忽略用不到的样式,达到简略代码的目的。
虽然使用SCSS拥有上面的众多好处,但是我们在项目中选择使用SCSS还是CSS,是根据项目的需求、性质和个人偏好来决定的。如果我们在一个样式需求较小的小项目上工作,普通CSS可能就已经能够满足了我们的项目需求了。但是如果是遇见更大、更复杂的项目,使用SCSS可以为我们提供更多优势,有助于更高效和可维护的样式工作流程。
这里就讲讲这两个问题,写过 CSS 应该就会比较清楚,虽然我才刚入门,但在写一些练手时就已经有点感觉了:写 CSS 后,很难维护,维护基本要靠注释来,而且由于 HTML 文档中标签的嵌套层次复杂,导致写 CSS 的选择器时也很费劲,尤其是在后期为某部分标签新增样式时,总会不知道到底应该在 CSS 文件中哪里写这个选择器,这个选择器是否会与前面冲突。
Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:
变量使用 全局使用:使用$varaible格式定义变量,比如全局的主题色,可在common.scss中定义,通过@import的方式引用即可 局部使用:在本文件中创建变量$themeColor = red,然后直接使用,存在块级作用域。 CSS原生可通过定义 -- 变量名结合var函数的方式来达到这一目标。 混合使用(mixins) 可在common.scss中使用@mixin varibaleName{}的方式定义 多次重复使用的样式,通过@include的方式应用。 还可以使用@mixi
CSS Modules CSS 模块化 不管是用jquery还是react开发,都会遇到的一系列 CSS 的问题: 全局污染 命名混乱 依赖引入复杂 无法共享变量 代码冗余 通过 JS 来管理 CSS
通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多,但主要有两类。
@import Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具有不同的 功效,详细解释如下。 @import Sass 扩展了CSS 的@import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一 的 CSS 文件。 另外,被导入的文件中所定义的变量或
"liveSassCompile.settings.autoprefix": 自动添加 CSS 前缀的配置。设置为使用最新的两个版本和全球使用率超过 1% 的浏览器。
CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也可以期待),有了像Sass这种预处理语言后,CSS的编程不再局限在枚举属性了,可以有更广阔的舞台。
1. 引言 CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也可以期待),有了像Sass这种预处理语言后,CSS的编程不再局限在枚举属性了,可以有更广阔的舞台。 2. Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能,让CSS编程变得异常强大。 当然浏览器是不认识Sass语法。开发人员写完了Sass的
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。
sass input.scss output.css :将sass文件输出到指定css文件
在编写CSS代码时,我们必须在每个地方重复相同的值和颜色。变量使我们能够在单个位置定义常用值,并解决代码中重复相同值的问题。
Sass: (Syntactically Awesome StyleSheets)
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立、互相作用的组件,来处理复杂、大型的软件。看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感。那么css模块化思想,也就是在css编写环境中,用上模块化的思想,把一个大的项目,分解成独立的组件,不同的
node-sass需要python环境,可以选择手动安装python或者安装node的同时安装附带的编译工具
CSS拓展语言出现的原因是,CSS自身支持的功能能有限(如不支持变量,条件控制,循环等编程元素),并不满足我们想要的一些功能。而CSS拓展语言支持CSS不支持的特性。
Sass和Less是两种常见的CSS预处理器,它们都是CSS的一种抽象层,可以增加CSS代码的复用性,层级,mixin,变量,循环,函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似,但是它们之间存在一些区别。
SCSS(Sassy CSS)和 CSS(Cascading Style Sheets)是两种用于定义网页样式的语言,它们之间有一些关键的区别:
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明
SASS 是一款 CSS 预编译器,它定义了一种新的编程语言,为CSS 增加了一些编程的特性,开发者使用这种语言进行编码后,代码需要被编译成 CSS 才能被浏览器理解。
CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题 解决的问题 嵌套规则:通过花括号的方式解决复杂的css父子样式嵌套问题。 变量规则:通过变量将公告样式抽离,减少冗余css代码。 提交逻辑 :可以像高级语言一样编写逻辑性的css代码
1.webstorm 自动编译SASS 下载安装包 http://rubyinstaller.org/downloads/ 然后点击安装,路径为默认路径就行, 勾选以下两项 add Ruby executables to your PATH Associate .rb and rbw files with this Ruby information 安装完,打开命令行 输入 gem install sass webstorm 配置 点击setting选择tool下的f
最下边附结构图 在线编辑器网址如下:http://sassmeister.com/ 注意编写的时候,符号千万别用了中文的:、;、。...之类的,会报错,Sass也转换不成css。 less和sass的区别: 博客园文章—http://www.cnblogs.com/wangpenghui522/p/5467560.html 本章主要内容:变量 、混合宏 、继承 、占位 、插值 、运算 、数据类型 1:定义 Sass是css预处理器的一种,也是最早的css预处理语言。Sass采用Ruby语言编写,为css增
作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~
以webpack4.0版本为例来演示CSS模块的处理方式,需要用到的插件及功能如下:
注意点 - 可以使用相对路径 - 导入的文件可以.scss后缀名 - 可以引入线上的scss文件 - 支持括入引入的写法 - 在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如,_navbar.scss 不能与 navbar.scss 并存。 - 支持引入带下划线和不带下划线的文件;比如(navbar和_navbar) - 若是文件命名**带下划线**则不编译该文件,但却可以正常把样式导入其他文件用(如index.scss引入_navbar,只产生index.css) - 若是文件命名*不带下划线**,两者皆会编译,产生CSS文件((如index.scss引入navbar,会产生index.css和navbar.css`)) - 支持在CSS 规则 和 @media 规引入样式
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有
让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。
[译] 不容错过的CSS变量 Bobi.ink 2019-07-06 原文链接: Don’t miss out on css variables 当我第一次听说CSS变量时,我是
&标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说Sass和Less(预处理器)「建议收藏」,希望能够帮助大家进步!!!
SASS是一种CSS预处理器提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 安装SASS SASS需要ruby支持,还需要gem,gem是ruby的包管理工具,ruby 1.9.1是自带gem的,如果是用1.8版本的话,需要另外安装。如果是windows的话,需要安装rubygems。 SASS一般会和Compass一起使用,这个也可以用gem来安装。 Ruby安装完之后,运行 gem install sass --pre gem install compass -
英文 | https://mobileappcircular.com/super-easy-sass-tutorial-and-usage-guide-6fb75946ff6c
CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量、函数、继承等机制,因此很容易写出大量没有逻辑、难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护。
随着css工程化的普及,sass在前端工程中越来越举足轻重。当然sass并不局限于管理css全局变量、mixin之类的"脏活累活"。
官方称之为 自定义属性 ,但我比较习惯叫它 变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性.
scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用。 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分。 缺点 一、如果用户在别处定义了相同的类名,也许还是会影响到组件的样式。 二、根据css样式优先级的特性,scoped这种处理会造成每个样式的权重
Sass(Syntactically Awesome StyleSheets) 是 CSS 的一种扩展,是 CSS的 超集(通过编译生成浏览器可以处理传统 CSS)。Sass 的出现是为了解决在大型项目中传统 CSS 会遇到的重复、可维护性差等问题(添加了嵌套的规则、变量、mixins、选择器继承等特性)。让开发者可以编写简洁、富语意(expressive )、可复用、可维护性和可延展性性佳的 CSS 代码。
在SCSS中,使用&符号来引用父选择器,在嵌套规则中使用父选择器。这样可以避免重复编写选择器,并且在生成的CSS中保持正确的层级关系。
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言,Sass 语法属于缩排语法,比 css 比多出好些功能 (如变量、嵌套、运算,混入 (Mixin)、继承、颜色处理,函数等),更容易阅读。
Sass 导入SASS文件 Sass的@import规则在生成css文件时就把相关文件导入进来
正例:mall-management-system 反例:mall_management-system / mallManagementSystem
在 Sass 中,可以在父选择器中写子选择器,以嵌套的形式来表达关联的关系,这样做可以减少我们重复书写父选择器的工作量。
Can,携程前端开发,目前从事小程序开发工作,对编译打包技术、小程序跨平台解决方案有浓厚兴趣。
领取专属 10元无门槛券
手把手带您无忧上云