前  言 JRedu LESS  是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情. Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (vari…

CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护. 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 中的继承机制),提高了代码的可读性和编…

前言:我必须得承认在最最最开始的时候,我对于css的预编译是非常不以为然的,这是错误的.一般在页面编写过程中,我会将需要reset的css放在reset.css中,讲会需要重复用到的放置到public.css中,对于常用的几个数据,例如字体font-10,font-12,font-24,font-36,对于margin来说margin-top-10,margin-bottom-10等等,这样修改起来也非常方便,不过在看了(瞬间忘记了书名)以后,减少引入能够优化页面性能. 我们都知道,浏览器的工作…

什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时 [特点] 完全兼容 CSS3 在 CSS 语言的基础上增加变量(variables).嵌套 (nesting).混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令等高级功能 自…

变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$black; } 通常我们会单独创建一个局部scss文件来定义这些变量 例如 _varables.scss varables前面的下划线用来区分这是局部文件,不会生成对应的css文件,通过@import方式在其他文件中导入该文件(下划线可以省略) @import 'varables'; 嵌套 例如我们有这样…

LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码浏览器是不能渲染的,需要我们把它编译成为能渲染的CSS才可以 开发环境 在本地开发中这是开发环境 生产环境 本地开发完成了,我们需要把代码上传到服务器上,服务器上的环境叫做生产环境 在开发环境下,我们一般都通过导入LESS插件(less-2.5.3.min.js)来随时编译LESS代码 <!--re…

以根据不同屏幕吃寸动态应用背景图片为例 新建一个mixin如下: @mixin bg_img($path, $ext){ @media screen and (max-device-width: 768px){ background: url($path + '@1x.' + $ext) no-repeat center; } @media screen and (min-device-width: 768px){ background: url($path + '@2x.' + $ext) n…

以前就使用过less和sass,其实很简单,就是很长时间不用,忘记语法了,现在来总结一片使用技巧 一.注释 less的注释不会被编译到css文件中,所以提倡多使用less中的注释:/**/ 二.变量 less语言中也有自己的变量,定义变量@变量名:变量值,使用该变量时,直接@变量名,就是该变量值 @width: 300px; body { background-color: white; } .div1 { width: @width; } 三.混合(mixin) 混合可以将一个定义好的clas…

当所有东西都 准备好之后 : 第一步: 安装less依赖,npm install less less-loader --save 第二步:找到webpack配置文件webpack.base.conf.js,在其中的module的rule中增加一项,如下: { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'} 第三步:现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面就可以写les…

在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的.在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西.但是如果遇到一个朝令夕改的领导或者甲方,那会变得相当惨. 因此,在项目中使用预编译语言就显得很有效率,且简单.目前项目中就使用 scss 预编译语言. 首先区分一下:Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.sc…

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行.个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率. 三种预处理器的对比: Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持:安装.编译依赖Ruby环境: Stylus早期服务器Node JS项目,在该…

[Sass/SCSS]预加载器中的"轩辕剑" 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 随着前端技术发展的越来越迅速,前端的样式也需要更加贴近时代的审美,那么CSS就需要承担更多的工作,(强调!这不是煽情!这是宣讲背景.),为了给CSS怼上去,预加载器出现了,没错,CSS用上了武器.Sass/SCSS--预加载器中的"轩辕剑",这也不是我帮它吹,是它自己说的,下图为例. 官网地址:S…

预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处器的语法和CSS都差不多. Sass和LESS都使用的是标准的CSS语法.这使用CSS预处器非常容易的将预处器代码转换成CSS代码.默认Sass使用".scss"扩展名,而LESS使用".less"扩展名: 重要的一点是,Sass也同时支持老的语法,就是不使用花括号和分…

Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造成选择器.层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量.嵌套.混合.继承等特性,让CSS的书写更加有趣与程式化. 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font-stack: Helvetica, sa…

目录 变量 嵌套 引入 混合 继承 操作符 CSS扩展 嵌套属性 标签(空格分隔): 未分类 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 上面例子中变量$font-stack和$primary-color的值将会替换所有…

Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造成选择器.层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量.嵌套.混合.继承等特性,让CSS的书写更加有趣与程式化. 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font-stack: Helvetica, sa…

Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造成选择器.层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量.嵌套.混合.继承等特性,让CSS的书写更加有趣与程式化. 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font-stack: Helvetica, sa…

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js.css.image.font.html,以及各种预编译语言都不在话下. 一.回顾与思考 在上一节的[入门:十分钟自动化构建]中我们讲解了如何用gulp去搭建一个工作流.我们认识到gulp是一个流程管理工具,以单个任务为基础单元,组合成为一套完整的工作流,而且gulp还有很多的以gulp-*格式命名的工作模块,用来处理各种资源文件,如果没有看过上一节内容的同学,建议…

上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码了.忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址:本文转载:http://blog.csdn.net/fungleo/article/details/77575077 什么是*.vue文件首先,我们用 vue-cli 脚手架搭建的项目,里面我们已经遇到了很多,如 in…

我遇到了什么问题? 不久之前我重构了一个古老的项目,总结了一些js方面的想法,不过对于一个前端项目而言不仅仅只由js组成的嘛,上学的时候老师和我说HTML+CSS+JS对应的是页面的骨架.皮肤和肌肉.既然骨架我们有了,肌肉也聊完了,今天我们就来聊聊"皮肤"吧. 由于我重构的是一个react-native项目,所以我们先来说说在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写c…

BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长) 如何使用BEM 一个独立的(语义上或视觉上),可以复用而不依赖其它组件的部分,可作为一个块(Block) 属于块的某部分,可作为一个元素(Element) 用于修饰块或元素,体现出外形行为状态等特征的,可作为一个修饰器(Modifier) 在本规范中,以双下划线 __ 来作为块和元素的间隔…

好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有快速目录的地方写的,之前是分为了10个文件) 所使用的一些包可能进过不断的迭代升级已不支持 01.初始化项目(安装需要的包) //生成package.json npm init 安装基础包 npm install react react-dom --save npm install webpack@…

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定…

原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写. 一. SASS/SCSS SASS,也称为SCSS,是CSS预编译语言的一种,常见的预编译语言还包括LESS,Stylus,除了语法风格之外它们之间没有什么太大的区别,从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了.预编译语言为CSS提供了变量定义,函数定义,层级嵌套等等一系列扩展功…

1.文件结构 ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpack.prod.conf.js │ └─webpack.test.conf.js ├─config │ ├─dev.env.js │ ├─i…

有人认为JavaScript是最好的语言,有人认为它一团糟.可按照C++之父的话来讲: 世界上只有两种编程语言:一种是天天被人喷的,另一种是没人用的. 不论你喜欢承认与否,JavaScript已经一天比一天火了,甚至火得有点过头,生态圈太过繁荣,每个月都可能有新的相关构建工具.开发框架或者别的什么库发布.如果你想了解更多,请查阅: 你的第一门编程语言应该学什么?ʇdıɹɔsɐʌɐɾ :ɹǝʍsuɐ 前段时间歪果仁对JS的发展现状专门做了一个调查,发起者是Sacha Greif(之前本专栏也发过他…

前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的安装方法可以自行谷歌安装,不在本文的介绍范围之内.也可以是使用git 手动安装. 1.autoprefixer 该插件主要使编写css更加的方便和快捷,可以配置快捷键给标签属性添加浏览器厂商前缀.安装前需要确定电脑安装node. 配置快捷键如下: //autoprefixer快捷键设置 { "key…

github源码地址 https://github.com/ghshuo/webpack-demo webpack介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 学习文档 : webpack官网: http://webpack.github.io/…