Heroku 是业内知名的云应用平台,从对外提供服务以来,他们已经有上百万应用的托管和运营经验.其创始人 Adam Wiggins 根据这些经验,发布了一个“十二要素应用宣言(The Twelve-Factor App)”,这个设计原则对SaaS平台非常具有指导意义. 十二要素应用宣言 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 SaaS 应用提供了方法论: 使用标准化流程自动配置,从而使新的开发者花费最少的学习成本加入…

1.嵌套输出方式 nested Sass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.c…

第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,CSS预处理器用一种专门的编程语言,进行web页面的样式设计,然后再编译成正常的CSS文件,以供项目使用.CSS预处理器为CSS增加一些编程特性,无需考虑浏览器的兼容性问题. 例如:你可以在CSS中使用变量.简单的逻辑程序.函数等在编程语言中的一些基本特性,可以让你…

一.前言 1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定. Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码,易于组织和维护. SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状.混入.选择子继承等功能,可以更有效有弹…

一.Sass的控制命令 二.Sass的函数功能 sass中除了可以定义变量,还自备了一系列函数功能,主要包括:字符串函数.数字函数.列表函数.颜色函数.Instrospection函数.三元函数等.当然,sass中也有自定义函数. 其中,最常使用的有:字符串函数.数字函数.列表函数.颜色函数. Map:Sass的map常常被称为数据地图,也有人称为数组,总是以 key:value 成对的出现,但其更像是一个 JSON 数据. 颜色函数:在Sass的官方文档中,Sass的颜色函数从大方面主要分为…

该内容全部为搬运,感谢作者的分享~,附有原文链接. 使用ruby环境 SASS学习系列之(一)--------- SASS,SCSS环境搭建(Ruby) 使用node-sass SASS学习系列之(二)--------- SASS,SCSS环境搭建(node-sass) 通过命令编译: npm run sass input.scss output.css sass-loader 在webpack打包里面,sass-loader作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比…

一.为什么我们要使用compass呢 Experience cleaner markup without presentational classes. It’s chock full of the web’s best reusable patterns. It makes creating sprites a breeze. Compass mixins make CSS3 easy. Create beautiful typographic rhythms. Download and cr…

晚上10点左右,刚好说想研究一下uniapp项目中怎么进行自动测试,于是跟着插件的官方教程开始配置测试环境,写好了一个简单的测试脚本,然后图形化操作IDE运行测试,却报错了一大片错误信息,如下所示: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 02:12:29.703 [sunnywasher-uniapp:mp-weixin] ModuleBuildError: Module…

前面简单介绍了sass的安装,特点和使用方法等,这里记录下sass的基本语法. 1.变量 2.运算 3.嵌套 4.代码复用 5.高级语法 6.自定义函数 一.变量 变量以$开始,像css属性那样赋值,如: $color: #ccc; div { color: $color; } 若变量定义在的选择器内,则仅在嵌套层级的范围内可用(可理解为块级作用域).不在任何选择器内定义的变量则在任何地方可用(可理解为全局变量). $color: #ccc; /*全局范围内可用*/ div { $width:…

从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用 一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,建议scss. 二,导入 使用@import导入但是和css导入有点区别. 比如基础的文件命名:_mixin.scss导入的时候可以省略下划线写成:@import "mixin" 三,注释 sass有两种注释方式,一种是标准的css注释方式/* */, 另一种则是//双斜杆形式的单行注释, 注意:不过这种单行注释不会…

2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生成css进行编译,而不是借助于考拉工具;  顺便从头来一遍流程--     建立如上图01所示的目录结构,层次明晰,便于日后管理. 快捷键进入当前文件夹,在此打开dos窗口输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法)   之后安装 cnpm,为了日后安装…

Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 术语名 定义 是否涉及HTML标签 列 内容度量的垂直单位 否 容器 构成一个网格布局的HTML元素 是 槽 网格布局中列与列之间的统一留白 否 3.2.3 固定的网格布局还是流动的网格布局 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择: // 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出); // 2.要么实现一种灵活的流动布局,让内容自适应用户的屏幕,…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

源码链接:http://pan.baidu.com/s/1o8M51hC 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.…

五.嵌套 在Sass中,嵌套有三种方式:选择器嵌套.属性嵌套.伪类嵌套 1.选择器嵌套 2.属性嵌套 3.伪类嵌套 六.混合宏 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到目的了.这时候 Sass 中的混合宏就会变得非常有意义. 七.扩展/继承/占位符 在Sass中,同关键词“@extend”来继承已存在样式块 八.插值 插值可以让变量和属性工作很完美,但使用时具有局限性. 语法格式:#{ XXX } 九.Sass的数据类型 Sass的数据类型大致有六种:数字.字符串(有引…

在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其底层原理和bookstrap相似 安装 npm install element-ui -S 在package.json中检查是否已经装上element 在main.js中:import ElementUI from 'element-ui' import 'element-ui/lib/theme-…

3. 导入SASS文件; css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件.然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢. sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来.这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求.另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用. 使…

本来打算整理jQuery Mobile来着,但是没有研究明白,所以接着上个周的继续介绍... [scss中的基础语法]   1.scss中的变量 ①声明变量:$变量名:变量值 $width:100px; $position : left; #div1{ width: $width; height: $width; background-color: red; border-#{$position}: 10px solid yellow; } scss中,允许将变量嵌套在字符串中,但是变量必须使用…

上一篇文章介绍了怎样使用compass合并雪碧图,生成的icons.css文件中单位是px,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用px单位肯定是不行的.所以需要做一下单位转换的工作. 移动端使用rem作为单位是最合适不过了.并不是使用了rem就可以,还需要做一些准备工作.我们都知道rem是基于html标签的font-size的,所以需要使用js动态的计算html的font-size.这里我使用淘宝的lib-flexible. 在上一…

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-…

一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install -g webpack 如果公司网络是设置代理的,要设置下代理地址 npm config set proxy http://***/ 三.建立项目文件夹 我在本机的E盘上,建了一个名称为demo的文件夹 四.初始化package.json 1.cmd控制台进入E盘下的demo文件夹 2.输入 npm…

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html 相关连接导航 在windows下安装gulp —— 基于…

前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上看提示是找不到.sass-cache文件夹下面的一个文件夹(父级目录名称中带有特殊字符很容易重现),然后几经纠结发现可以不开启或关闭sass的缓存功能.也就是修改config.rb的配置节点即可,如下图所示: 1.如果cache设置为true,请设置cahce_path的路径(目录层级尽量少).…

摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. html : Emmet,jade,haml,slim http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html 二. css : less,sass,stylus http://www.zhihu.com/question/2030038…

写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这里总结Sass的使用方法. ======正文开始====== 我们可以通过一种类似css的编程语言编写代码,保存为.scss后缀名的文件,然后使用Sass进行处理为css文件,而这种.scss文件中可以有变量.嵌套等功能,有些编程的味道,Sass简单介绍看这里:Sass:同时.scss文件也能够通过…

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty…

一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输出方式 [扩展]SASS提供四个编译风格的选项: nested:嵌套缩进的css代码,它是默认值. expanded:没有缩进的.扩展的css代码. compact:简洁格式的css代码. compressed:压缩后的css代码. 四.又到了写代码的时候啦,随便用一款文本编写工具打开demo.sc…

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