FontAwesome::Sass(5.x版) https://fontawesome.com/icons?d=gallery&m=free 只能使用免费的. 在app/assets/stylesheets/application.scss中载入 @import "font-awesome-sprockets"; @import "font-awesome"; Rails Helper usage: 三种格式的icon: solid (fas) , 字体是黑…

1.首先要安装sass,安装流程: http://www.w3cplus.com/sassguide/install.html 2.sublime text安装Package Control(已经安装了Package Control的朋友可以跳过此步骤). a.sublime text里按快捷键调出控制台:Ctrl+` b.在控制台复制Package Control安装代码,代码在Package Control官网获取:https://packagecontrol.io/installation…

Bootstrap less/sass Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量.嵌套.运算,混入(Mixin).继承.颜色处理,函数等),更容易阅读.Scss和sass的改良版. Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借…

CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于管理后台.ERP)Bootstrap 3.3:http://v3.bootcss.com/ (资料齐全.提供less.sass版)AUI: http://amazeui.org/getting-started (中文排版.高度兼容.高度封装.传统css)SUI 1.6:http://semantic…

在网页中会引用到哪些常见的静态资源? js (.js  .jsx  .coffee  .ts) css (.css  .less  .sass  .scss scss是sass的plus版) images(.jpg  .png  .gif  .bmp  .svg) videos audios fonts(.svg  .ttf  .eot  .woff  .woff2) templates(.ejs  .jade .vue) 网页中引入的静态资源多了以后会有什么问题? 网页加载速度慢,因为我们要发…

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby…

Sass和Compass设计师指南是<响应式Web设计:HTML5和CSS3实战>作者Ben Frain的又一力作.作者通过丰富.完整的案例,循序渐进地展示了Sass和Compass的使用方法.既使不懂编程的设计师读完本书也能轻松生成跨浏览器的.易于维护的CSS代码,并学会编写media query代码,进行响应式设计.本书适合交互设计师.UI设计师.网页设计师.前端开发工程师阅读. 作为CSS预处理器,Sass已经成为编写更简洁.更易于维护的跨浏览器支持的CSS代码的标准方法.它是对CSS功…

因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳＿┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官网下载ruby(百度一下,你就知道). 当然了,国外的网站,动不动上不去,或者下载不了都有可能,所以百度软件中心这个也是可以的,亲测可用 点开以后选择普通下载,防止捆绑,从我做起. 下载完以后几乎是傻瓜式安装,使用默认路径就可以, 注意这里要勾上第二项,不然可能会出现找不到Ruby环境的情况.(就像…

实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用!!!!!),除了设置display:flex之外,还有另外两个属性需要设置,分别是justify-content和align-items,他们的意思分别是水平居中和垂直居中.HTML+CSS代码如下: body { position: absolute; wid…

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Comma…

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html…

简单用法: 变量 sass中可以定义变量,方便统一修改和维护. //sass style $fontStack: Helvetica, sans-serif; $primaryColor: #333; body { font-family: $fontStack; color: $primaryColor; } //css style body { font-family: Helvetica, sans-serif; color: #333; } 嵌套 sass可以进行选择器的嵌套,表示层级关…

当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java.PHP.Python.TypeScript.Objective-C...还是前端开发者,你都值得拥有.下面,让我们来看一看Visual Studio Code 这个神器吧~  一.Visual Studio Code的下载和安装 Visual Studio Code最新版下载地址,https://…

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

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…

1.less 安装一个稳定版的node.[例如node-v4.4.4-x64] 然后直接在webstrom里导入那个lessc.cmd 2.sass 安装ruby. 安装完之后点开,Start那个安装好的文件. $ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ [如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-c…

自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. 当web开发趋势迈进WebApi+Js 时代,compass和Sass 会不会成为web开发的标配?这个得实际开发检验下. 预处理 当web站点变的越来越复杂. 先是html 复杂了---->动态编程语言解决方案 js复杂了--->jq和dojo 等解决方案 css现在也变的复杂了,但是css本身…

之前曾经安装过一次sass,不过可惜没使用,现在换了电脑重新安装,又上网找了些资料,终于安装成功,现在就当做个记录方便下次安装. 首先 到官网下载个最新版的ruby :http://rubyinstaller.org/downloads 目前最新的稳定版是2.2.2. 下载完成后就是安装了,不过记得选择勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境. 然后 Ruby如愿的安装成功了.接着就是开始安装…

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉. 其实很多人之所以对sass或less感兴趣,就是因为他们能使用变量和这个@mixin功能,而后面的%和@function知道的人就比较少了.所以说@mixin这个东西还是很有诱惑力的,没办法,广告做得好啊,大明星.这里之所以把%和@function和@mixin放在一起,当然并非无…

less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个注意点,sass可以用sass后缀名,也可以用scss后缀名.前者比较恶心,像python一样没有花括号,也不让写分号,散架子一样.因此推荐用scss,这个也是目前我遇到的大部分人的选择. 关于中文编译出错的问题,需要指定字符集. @charset "utf-8";//必须设置了这个才能编…

写在前面: 1.第一版的代码还有些烂,等功能开发齐全了,做一次重构,再慢慢分享代码 2.邮箱功能.自动升级功能还没有做,笔记功能和备忘功能是好用的,大家如果不嫌弃,可以先用起来 3.笔记功能目前还不能直接贴图或贴附件到编辑器里去,我后续会把这个功能加上去 4.用的是qt5.3+sqlite 3 5.笔记里的编辑器是用webview引入进来的kindeditor,本来打算用百度开源的编辑器,但是一启动就崩溃,联系百度的开发人员都没能解决,后来就放弃尝试了 6.界面中的所有icon图标都是用的fon…

出处:http://www.w3cplus.com/preprocessor/sass-basic-variable.html 因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 刚开始sass的人,也许其最大的抱怨就是sass的变量了,尤其是那些了解less变量的,更是会说sass的变量做得不如less的变量好,less中有明显的全局变量和局部变量之分,但是到sass这边来,好像有点乱了,分不清了.其实不管sass的变量还…

一.sass编译为css文件 编译的方法有很多 1.koala编译  请参考 http://www.w3cplus.com/blog/777.html http://koala-app.com/index-zh.html 安装好了之后打开界面 其他参数不需要设置直接使用默认设置即可,右边选择编译类型.点击执行编译按钮就会对sass文件编译并输出到平级css文件里面了. 2.ruby编译  请参考http://www.w3cplus.com/preprocessor/sass-compile.ht…

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

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

什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 在 CSS 中使用变量.简单的逻辑程序.函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处. CSS 预处理器语言,比如说:Sass(SCSS)LESSStylusTurbineSwithch CSSCSS Cachee…

转自:http://www.cnblogs.com/qqloving/p/3676852.html 自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. 当web开发趋势迈进WebApi+Js 时代,compass和Sass 会不会成为web开发的标配?这个得实际开发检验下. 预处理 当web站点变的越来越复杂. 先是html 复杂了---->动态编程…

Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一种即可,简单点说,Sass就是“CSS预处理器”,你可以称其是工具或者是语言.如果你实在想知道他是什么?可以看Sass官网上的一段描述. Sass is an extension of CSS that adds power and elegance to the basic language. It all…

许久没更新博客啦,这两天研究了下 SASS 和 LESS ,最终选了 SASS,因为相对比较成熟些吧,试了很多坑之后,终于成功了,下面上步骤: 1. 安装 PHPStorm 的 SASS 插件 好像是自带了该插件的,如果没有的话,就打开 setting -> plugins  自己安装一个吧,就不多说了 2. 安装 Ruby Windows 版本下载地址: http://rubyinstaller.org/downloads/ Linux or Mac 地址: http://ruby.taoba…