在学习Sass之前,我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。
Sass 官网上是这样描述 Sass 的: Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。 Sass 前世今生: Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
CSS拓展语言出现的原因是,CSS自身支持的功能能有限(如不支持变量,条件控制,循环等编程元素),并不满足我们想要的一些功能。而CSS拓展语言支持CSS不支持的特性。
让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。
css作为前端三剑客,从诞生以来很少变化,css3都已经诞生了20年,和js的框架层出不穷相比,似乎css就不需要框架,就不需要更优化的写法。然而在追求极致的程序员面前,代码的可维护性,代码的优雅性有着迫切希望改进css代码的编写,于是css预处理器诞生了。
为了简化样式的描述,浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单,但在很多方面都不太方便,比如不支持嵌套,代码比较冗余;不支持继承和混合,代码不好复用等。
前端开发中最大的坑之一莫过于写css,流水账式的写法让众多码农们头痛不已。好在有了sass,写css不再死板。sass对css的增强如下:
node-sass需要python环境,可以选择手动安装python或者安装node的同时安装附带的编译工具
SCSS(Sassy CSS)是CSS的一种超集,它引入了许多增强的特性和功能,使得编写和维护CSS样式更加方便和灵活。SCSS使用类似于CSS的语法,同时还支持嵌套规则、变量、Mixin、继承等高级特性。
众所周知css并不能算是一们真正意义上的“编程”语言,它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。
系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webpack.dev.conf.js 4、build/utils.js 5、build/vue-loader.conf.js 6、build/build.js 7、build/dev-server.js 8、build/check-versions.js 9、../config/index.js 下面是build/utils.js中相关代码和配置的说明 项
上篇文章带大家使用 webpack 5集成 React 与TypeScript,同时为了提高我们的代码质量,我们会在构建中添加「类型检查」和「代码规范校验」。这次我们在上篇的基础上介绍如何集成 css、less 与sass。
几个月前,我介绍了Sass的用法。 Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配Compass,它才能显出真正的威力。 本文介绍Compass的用法。毫不夸张地
在 《Vue 3:2020年中状态更新》 的文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本),8月初发布3.0正式版。
compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装ruby。 命令: gem install compass 项目初始化: 要创建一个你的Compass 项目,如果项目的名字叫 myproject compass create myproject 会在当前的目录下生成这个目录,里面有config.r
意想不到,Tony 主题有了歪果仁的关注(塑料英语原形毕露),这个 29 岁歪果仁是个增长黑客、自由职业者,住在成都帮外国企业面向中国市场优化网站产品,包括 SEO 之类(对于本博客来说并不存在的东西)的。
https://segmentfault.com/a/1190000023479851
grunt是什么 grunt是目前非常流行的前端构建工具,支持自定义插件,有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务,例如压缩、编译、单元测试、linting等 前端为什么需要构建工具 先看下前端的开发场景 小项目中,css文件和js文件并不多,前端部分是很轻的,几乎不需要我们特别的关注 而在一个大项目中,css文件和js文件的数量会达到几十个上百个,一个页面中会引用很多css和js文件,js的开发方式也已经模块化,不再像之前那样 经常把很多函数写在一个文件中,css的开发开始使用SAS
在 Sass 中,可以在父选择器中写子选择器,以嵌套的形式来表达关联的关系,这样做可以减少我们重复书写父选择器的工作量。
这里就讲讲这两个问题,写过 CSS 应该就会比较清楚,虽然我才刚入门,但在写一些练手时就已经有点感觉了:写 CSS 后,很难维护,维护基本要靠注释来,而且由于 HTML 文档中标签的嵌套层次复杂,导致写 CSS 的选择器时也很费劲,尤其是在后期为某部分标签新增样式时,总会不知道到底应该在 CSS 文件中哪里写这个选择器,这个选择器是否会与前面冲突。
2015年8月19日对Bootstrap来说是个特别的日子——不仅是项目四周年纪念日,也是经过了一年密集开发之后发布Bootstrap 4内测版的日子。Bootstrap 4是一次重大更新,几乎涉及每行代码。
时下大热的vue框架又来了新开发环境构建工具——Vite,今天我们一起来了解一下这个新成员。
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。
其实很早就想把Blog迁移到静态化的博客系统了。不过一直没花时间来搞,当然主要原因还是懒。
借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1...无缝过渡
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。
不久前,我写了“I’m Excited About PostCSS, But I’m Scared to Leave Sass”。从那时起,我全心全意地拥抱PostCSS(离开Sass,至少暂时性的)。我已经在大型项目中使用PostCSS,贡献和创作插件,与维护人员沟通,了解更多可能。这一切都很顺利,十分顺利。
windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可。 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功。 2. Git(命令行终端) Git官网下载安装即可。
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 CSS GCSS:一个用GO语言编写的CSS预处理器。官网 LESS:向下兼容CSS并为当前的CSS增加额外的功能。官网 Myth:只用写纯CSS而不用担心浏览器加载缓慢。官网 PCSS:一个用Python语言编写的CSS预处理器。官网 PostCSS:通过JS插件来转换CSS。PostCSS Sass:成熟、稳定且强力的专业CSS扩展语言。官网 St
Webpack是一个前端资源加载以及打包工具,只需要简单的配置即可实现前端各种工程化的操作。 配置 webpack 说难不难,说简单也不简单,现在几大框架都配备了全家桶,quick-start 项目基本上都已经配置好了基础的 webpack 配置。 虽然能够正常使用,但是,对于各个配置项,并不是很清楚。这几天利用空余时间,理一下几个 loader 和 插件的使用。
在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境,用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果:1、能够编译JSX语言 2、css样式使用Sass开发 3.能够将基础的ES6转化为ES5 4.能够使用ESLint在开发的时候为我们做代码风格审查
本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点惊喜,内容越后越干,请紧张的往下看。
这些都是旧时代非常突出的问题,对开发效率影响非常大,直到… 出现了很多的工程化工具,比如:webpack、vite、esbuild、rollup.js 等等
深色模式(Dark Mode)在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前,深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度,使得使用人员长时间盯着屏幕眼睛没有那么疲惫;后者通过深色模式来降噪,从而突出主体内容部分。快速开发一个深色模式难吗?在支持css自定义属性(又称css变量,css variables)的现代浏览器里,可以说是相当的容易。甚至可以在运行时实时新增主题,摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。
想到做这个,是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如:--main-color: black;),由var() 函数来获取值(比如:color: var(--main-color);)
React SSR 是什么?React SSR 是 React 服务器端渲染 (SSR: server side render) 技术。传统的服务端渲染方式是使用 HTML 模板的方式渲染出来的。访问数据库,拿到数据然后将数据填充到 HTML 模板上,比如 Node.js 中的 pug 模板引擎、ejs 模板引擎等都是服务端渲染的模板。传统的服务端渲染通常用在文档型页面上,而现在网页被称为 web app,页面更像 app 应用,现在做服务器渲染主要是为了 SEO 和首屏。React 与模板渲染很相似,都是通过数据驱动,将页面渲染出来。
直接看官方项目吧: https://github.com/jekyll/jekyll-sass-converter
针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤,基本可以使到 80% 的webpack用例都变得简单明了。
点击某个按钮后,触发一个动画效果,原本的网格内容,将按顺序(又带点随机的效果)从高处下落进行加载填充动画。
SASS是一种预处理器及样式表语言,由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能,例如变量,嵌套规则,mixin,函数等。
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言,Sass 语法属于缩排语法,比 css 比多出好些功能 (如变量、嵌套、运算,混入 (Mixin)、继承、颜色处理,函数等),更容易阅读。
Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/snack-helper 前言 什么是 helper ?任何框架都不是万能的,而业务需求却是多种多样,很多时候我们只需要更改组件的部分属性,而 helper 就是调整细节的工具。我在之前的文章《如何编写轻量级 CSS 框架》中也举过例子,我们完全没必要因为几个属性的不同而重新编写新组件。大部分的 helper 都是一个类对应一个 CSS 属性,属于最
Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:
领取专属 10元无门槛券
手把手带您无忧上云