端午节第一天

将之前做的一个小demo的css样式改为了scss

好吧 改完了 赶紧由小兵 升级到中尉了

什么是scss?

我的理解是scss 就是css 的预处理器,使css变得更加富有逻辑。

有什么好处?

比如再项目过程中 字体都是red 现在 我想把所有字体 无论大小都换成 green

  1. 你要改每个样式里面的字体颜色(臣妾做不到)

  2. 当然你也可以用模块化的css 将它分出一个class.然后满屏都是font-normal-color font-big-color font-size-14 font-size-13 这样的东西

好吧 有了scss 你可以更好的解决刚刚我所遇到的这种问题

你只需要改变量

<p class="nav">Hello SCSS!</p>
<div class="footer">Hello World!</div> .nav{
color: $font-normal-color;
} .footer {
color: $font-normal-color;
border: 1px solid $font-normal-color;
} 然后只需要改动
$font-normal-color: red;

如何安装?

如果是window系统

需要安装ruby 因为scss是基于ruby开发的

可以参考 http://www.w3cplus.com/sassguide/install.html

如果是Mac

不要要安装 自带

安装完ruby

输入

gem install sass

(记得翻墙)

可以查看scss的版本

sass -v

说明安装成功

开始如何使用

变量

    $blue : #1875e7; 
  
$side : left;
  
.rounded {
border-#{$side}:5px solid $blue;
}

计算


div {
padding: $var * 10%;
margin: (12px/2);
height: 20px + 30px;
}

嵌套

a{
&:hover {
color: red;
}
}

继承

.class1{
font-size: 14px;
color: red;
} .class2 {
@extend .class1;
height:20px;
}

Mixin

@mixin size($value: 20px) {
height:$value;
width: $value;
} .div1 {
background: red;
@include size(30px); //长宽都是30px
} .div2 {
background: green;
@include size;//长宽都是0px
}

颜色函数

这里方法比较多,自己对颜色的换算也不是很懂 可以参考

http://www.w3cplus.com/preprocessor/sass-color-function.html

插入文件

@import '文件路径'

高级函数

if语句


div {
@if 1+1 ==2 {
border : 1px solid;
}
}

循环语句

 @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }
@for $i from 1 to 5 {
.border-#{$i} {
border: #{$i}px solid solid blue;
}
}

自定义函数

.nav{
width: double(5px);
}

编译

sass test.scss test.css

// watch a file
  sass --watch input.scss:output.css
  // watch a directory
  sass --watch app/sass:public/stylesheets

开启你们SASS之旅吧!!!!

scss使用后的简单入门总结的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门,只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

  7. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  8. Asp.Net EF Code First 简单入门

    今天在上班期间花了点时间学习了一下微软的EntityFramework Code First技术,这篇文章只是简单的入门,不多废话,下面直入主题. 一.首先添加一个解决方案,接着添加一个web网站,D ...

  9. HTML5简单入门系列(五)

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

随机推荐

  1. Springboot-plus 安装使用的一些问题

    最近在研究一些springboot的框架,然后看到了这个款 springboot  plus ,下载下来研究下. 将安装部署的一些问题记录下来了. 第一个,就是部署的时候,我使用的MySQL数据库,导 ...

  2. YYH的积木(NOIP模拟赛Round 6)

    题目描述 YYH手上有n盒积木,每个积木有个重量.现在他想从每盒积木中拿一块积木,放在一起,这一堆积木的重量为每块积木的重量和.现在他想知道重量最少的k种取法的重量分别是多少. 输入输出格式 输入格式 ...

  3. 设置JPA的Query返回Map对象

    说明正常执行jpa查询的时候需要传一个对应实体进行映射返回的数据,这样有时候如果一个sql是复合sql关联很多表,就需要新建实体有点麻烦,通过下面方式就能将返回结果映射成map.这样就能随意获取返回结 ...

  4. undefined reference to XXX 问题原因

    原文地址:http://blog.csdn.net/cserchen/article/details/5503556 Linux下编译程序时,经常会遇到“undefined reference to ...

  5. log4j配置文件动态指定日志文件名称

    我们在项目当中经常会使用log4j进行日志记录,偶尔会遇到一些要求,比如日志文件名称按照启动参数动态配置,而不去修改log4j.xml,比较简单的一种做法是,通过设置系统属性的方式实现,代码: if( ...

  6. svn 基本使用

    通过脚本删除物理文件已经不存在的文件 svn st | sed -n '/!/p' | awk '{print $2}' | xargs svn delete 或 svn st | awk '{if ...

  7. Java程序执行时间

    第一种是以毫秒为单位计算的.  Java代码  //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  ...

  8. 计蒜客 28319.Interesting Integers-类似斐波那契数列-递推思维题 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 I)

    I. Interesting Integers 传送门 应该是叫思维题吧,反正敲一下脑壳才知道自己哪里写错了.要敢于暴力. 这个题的题意就是给你一个数,让你逆推出递推的最开始的两个数(假设一开始的两个 ...

  9. Codeforces Round #321 (Div. 2) A. Kefa and First Steps【暴力/dp/最长不递减子序列】

    A. Kefa and First Steps time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  10. 模板—字符串—后缀自动机(后缀自动机+线段树合并求right集合)

    模板—字符串—后缀自动机(后缀自动机+线段树合并求right集合) Code: #include <bits/stdc++.h> using namespace std; #define ...