2016年12月_YuuyaRin

原创 Sass学习之路(15)——列表函数(一)

在Sass中，列表函数主要是用来值列表进行一些函数操作。如果一一列举回来，会发现列表函数的种类会比数字函数和字符串函数多很多，所以就分开来写好了。（其实也是因为最近在自己写一些前端的小东西，所以时间有点紧）。那么回归正题：1.length()函数：length()函数和JS中的Array.length的作用基本一样，用来返回一个列表中的值的个数（或者说是列表长度）：.length{

2016-12-22 17:27:03 501

原创 Sass学习之路(14)——数字函数

Sass中除了之前写到的用来处理字符串的字符串函数，还有关于数字处理的数字函数。（其实Sass中的数字函数和Js中的Math函数还是非常相似的）1.percentage()percentage()函数主要是用来将一个不带单位的数字转化成百分比（这样算弹性布局的时候应该很方便）。来看一个例子：.footer{ width : percentage(5px / 10px)

2016-12-20 11:58:15 986

原创 Sass学习之路(13)——字符串函数

字符串函数，顾名思义就是用来处理字符串的函数。下边来列举一下Sass中主要的字符串函数：1.unquote($string)unquote()函数主要用来删除字符串中的引号，如果字符串本来就没有引号，则不会做任何更改。下面来看下对不同字符串的使用效果：//SCSS.test1 { content: unquote('Hello Sass!') ;}.test2 {

2016-12-18 15:27:07 1024 1

原创 Sass学习之路(12)——控制命令

Sass的控制命令其实和JS以及其他一些语言中的非常相似：1.@if@if指令是一个SassScript，可以根据条件来处理样式块，在条件为true或false时，会返回不同的样式块。它也可以配合@else if 以及@else一起使用。下边是一个通过@if来控制元素显示隐藏的例子：//SCSS@mixin blockOrHidden($boolean:true) { @if

2016-12-17 14:57:20 651

原创 Sass学习之路(11)——Sass运算

程序中的运算是非常唱见的一件事情，而运算也是Sass中的一项基本属性，在Sass中可以进行各种数学计算。1.加法在变量和属性中，都可以做加法运算。看一个例子：.box { width: 20px + 8in;}编译出的CSS:.box { width: 788px;} 这里解释一下in这个单位，in是指英寸，1英寸等于96px，所以最后编译的结果是20px+8*96

2016-12-17 13:25:09 1284

原创 Sass学习之路(10)——注释、数据类型

1.Sass的注释：在说Sass的数据类型之前，先提一提Sass中注释的两种方式。(1).类似CSS的注释方式，如： /* 这里是一段注释 */(2).类似JavaScript的注释方式，如 //这里是一段注释这两种方式都可以用来在Sass中注释，但是有一些区别。第一种方式，注释的内容也会在编译出的CSS中显示，而第二种不会显示。我们来看一个例子：//定义一个占位符%m

2016-12-16 12:36:30 3223

原创 Sass学习之路(9)——插值 #{}

在Sass中，除了在设置属性的值的时候，我们可以使用变量或循环等方式赋值以外。属性的名称，选择器名称等，都可以使用一种叫插值的方式将字符串插入进来。下边我们来看一个例子：$properties: (margin, padding);@mixin set-value($side, $value) { @each $prop in $properties { #{$pro

2016-12-15 15:39:38 1865

原创 Sass学习之路(8)——拓展/继承/占位符

1.拓展/继承Sass中和CSS一样，也具有继承的用户，也是继承类中的样式代码块。Sass中是通过关键词"@extend"来继承已存在的类样式块，从而实现代码的继承。举个栗子：//SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { backgr

2016-12-14 15:18:23 1325

原创 Sass学习之路(7)——混合宏

在Sass的使用中，如果整个网站中有一些小的样式类似，比如字体、宽高、颜色，可以通过变量来统一处理。但是当我们需要重复使用大段的样式时，使用变量就不能很方便的处理了，这时，Sass的混合宏就体现出了他的作用。1.声明混合宏无参混合宏：@mixin border-radius { -webkit-border-radius: 10px; border-radius

2016-12-13 13:57:59 1167

原创 Sass学习之路(6)——嵌套

Sass中提供了嵌套的功能，让样式代码显得非常有层次感，可以将选择器，样式等按层级一层一层嵌套下去。Sass嵌套分为3种：1.选择器嵌套：比如这样一段HTML: Home About Blog比如我们想给a标签设置样式,CSS的写法是这样的:nav a { color:red;}/*或者*/header nav a { color

2016-12-12 16:21:34 649

原创 Sass学习之路(5)——变量

1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱)，并使用冒号(:)进行赋值，例如：$width:200px;//定义了一个名为width的变量，值为200px 2.普通变量和默认变量:普通变量便是我们在大括号外用上面的方式声明的变量，可全局使用。默认变量需要在声明的变量后加上 !default，如下： $lineHeight:1.

2016-12-12 15:29:57 1924 1

原创 Sass学习之路(4)——不同样式风格的输出方式

因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种。比如下面这一段Sass代码，我们来看看在不同风格下，会编译成什么样吧：nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-blo

2016-12-12 14:52:13 3614 1

原创 Sass学习之路(3)——Sass编译

Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤，因为".sass"和".scss"文件并不能直接使用标签引用，最终其实还是要将他们转换成CSS文件来在项目中使用。所以要让web页面真正使用到Sass缩写的东西，编译这个过程是必须要有的。这里会提到3种编译方法：1.命令行编译顾名思义，就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件（个人觉得，这种方式比较

2016-12-11 13:35:45 888

原创 gulp入坑系列(4)——gulp的代码转换

终于进入正题了，当初也是为了将Sass和SCSS代码转换成CSS才从Sass的学习路径忽然跳到了gulp的大坑里╮(￣▽￣")╭当然，gulp不仅仅能转换Sass，这里会提到如下转换:jsx转换成常规的JavaScript（说到jsx，玩过react的同学应该是知道的）es6转换为es5Less,Sass转换为CSS首先，新建一个文件夹，然后继续和之前的方法一样，在文件夹里np

2016-12-10 16:04:06 1986

原创 gulp入坑系列(3)——创建多个gulp.task

继续gulp的爬坑路，在准备get更多gulp的具体操作之前，先来明确一下在gulp中创建和使用多个task任务的情况。 gulp所要做的操作都写在gulp.task()中，系统有一个默认的default任务，如下： var gulp = require('gulp');//gulp自身 gulp.task('default',['task1','task2'], functi

2016-12-10 12:36:14 8183

原创 gulp入坑系列(2)——初试JS代码合并与压缩

在上一篇里成功安装了gulp到项目中，现在来测试一下gulp的合并与压缩功能gulp入坑系列(1)——安装gulp（传送门）：http://blog.csdn.net/u013034014/article/details/53543223在之前建立的项目中写入，在根目录新建js文件夹，并在文件夹中新建两个js文件，代码如下：index.js:var index={};in

2016-12-09 19:53:47 3673 2

原创 gulp入坑系列(1)——安装gulp

前言好吧，我承认我是为了搞定Sass编译CSS文件的问题，迷一样的着手入gulp的坑，sass和gulp的爬坑历程大概会一起更新。然后感觉这里windows和mac的流程差不多，不过mac的通常在指令前加sudo ，本喵是windows的本本，所以就以windows的流程为例了。1. 安装淘宝cnpm镜像因为很多npm包都是国外的，所以安装起来很慢，所以我们可以利用淘宝的镜像服务器来进行安

2016-12-09 19:05:22 6572

原创 Sass学习之路(2)——Sass环境安装（windows版）

因为本喵目前用的是window10的本子，所以这里就发windows版本的安装流程啦。（希望有朋友可以赞助我一个mac(┳＿┳)）；第一步：安装ruby因为Sass是基于ruby编写的，所以先去官网下载ruby(百度一下，你就知道)。当然了，国外的网站，动不动上不去，或者下载不了都有可能，所以百度软件中心这个也是可以的，亲测可用点开以后选择普通下载，

2016-12-09 15:54:14 702

原创 Sass学习之路(1)——Sass简介

Sass是CSS的一种预处理器语言，类似的语言还有Less，Stylus等。那么什么是CSS预处理器？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。换言之就是说，CSS预处理器是一种专门的变成语言，在通过这种语言编写之后，再将其编译成正常的CS

2016-12-09 15:11:41 1082 3

YuuyaRin的博客