2016年12月18日

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

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

posted @ 2016-12-18 15:47 Yuuya丶Rin 阅读(442) 评论(0) 推荐(0) 编辑

2016年12月16日

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

摘要: 终于进入正题了,当初也是为了将Sass和SCSS代码转换成CSS才从Sass的学习路径忽然跳到了gulp的大坑里╮( ̄▽ ̄")╭ 终于进入正题了,当初也是为了将Sass和SCSS代码转换成CSS才从Sass的学习路径忽然跳到了gulp的大坑里╮( ̄▽ ̄")╭ 终于进入正题了,当初也是为了将Sass和 阅读全文

posted @ 2016-12-16 14:30 Yuuya丶Rin 阅读(972) 评论(0) 推荐(0) 编辑

2016年12月15日

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

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

posted @ 2016-12-15 17:01 Yuuya丶Rin 阅读(3339) 评论(0) 推荐(1) 编辑

2016年12月14日

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

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

posted @ 2016-12-14 15:49 Yuuya丶Rin 阅读(699) 评论(0) 推荐(0) 编辑

2016年12月13日

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

摘要: Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还是要将他们转换成CSS文件来在项目中使用。 所以要让web页面真正使用到Sass缩写的东西,编译这个过程是必须要有的。 这里会提到3种编译方法: 1.命 阅读全文

posted @ 2016-12-13 15:11 Yuuya丶Rin 阅读(382) 评论(0) 推荐(0) 编辑

2016年12月12日

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

摘要: 在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)——安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件, 阅读全文

posted @ 2016-12-12 18:22 Yuuya丶Rin 阅读(6760) 评论(1) 推荐(0) 编辑

2016年12月11日

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

摘要: 前言 好吧,我承认我是为了搞定Sass编译CSS文件的问题,迷一样的着手入gulp的坑,sass和gulp的爬坑历程大概会一起更新。然后感觉这里windows和mac的流程差不多,不过mac的通常在指令前加sudo ,本喵是windows的本本,所以就以windows的流程为例了。 1. 安装淘宝c 阅读全文

posted @ 2016-12-11 16:13 Yuuya丶Rin 阅读(1934) 评论(0) 推荐(0) 编辑

Sass学习之路(2)——Sass环境安装(windows版)

摘要: 因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦。(希望有朋友可以赞助我一个mac(┳_┳)); 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官网下载ruby(百度一下,你就知道)。 当然了,国外的网站,动不动上不去,或者下载不了都有可能,所以 阅读全文

posted @ 2016-12-11 13:20 Yuuya丶Rin 阅读(269) 评论(0) 推荐(0) 编辑

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

摘要: Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。 换言之就是说, 阅读全文

posted @ 2016-12-11 13:17 Yuuya丶Rin 阅读(517) 评论(0) 推荐(0) 编辑

导航