scss 学习笔记

由于没有办法在网络上找到适合顾客的模板，同时之前自己写css也没有很好的管理方式，最终选择了scss。

Nested

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
》》》》》》》》》》》》》》》》》》》》
#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

注意被嵌套的写法，尽量不要嵌套太多层，这样在渲染时，会影响性能

引用父选择符： &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

》》》》》》》》》》》》》》》》》》》》》》》》》》》》
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

嵌套属性

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

》》》》》》》》》》》》》》》》
.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

分开font的属性是比较好管理的，尽管代码多了许多

Placeholder Selectors: %foo

//如果没有找到%extreme，就不会编译出东西
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
//。notice 或者#notice 都可以接受
.notice {
  @extend %extreme;
}

》》》》》》》》》》》》》》》》
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

这是个好的处理方式，一般是使用在配搭属性，或tagName

Comments: /* */ and //

/*编译后看到我 */
body { color: black; }

// 你看不到我
a { color: green; }

》》》》》》》》》》》》》》》》
/*编译后看到我 */
body {
  color: black; }

a {
  color: green; }

SassScript

Interactive Shell

不知道。。。

Variables: $

$width: 5em;

》》》》》》》》》》》
#main {
  width: $width;
}

如果你看到！取代$ , 或者 ： 取代 = ：，可以确定那是旧版本的，官方说已被弃用

数据类型

SassScript 支持六种主要的数据类型：

  • 数字（例如 1.2、13、10px）
  • 文本字符串，无论是否有引号（例如 "foo"、‘bar‘、baz、important）
  • 颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
  • 布尔值（例如 true、false）
  • 空值（例如 null）
  • 值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

字符串

虽然说可以接受“”或没有引号，但在编译#{}时，就例外，这要注意

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

》》》》》》》》》》》》》》
body.firefox .header:before {
  content: "Hi, Firefox users!"; }

如果没有给引号，就error，因为.header 是class，而文本都是string，这就是要注意的

Lists

文章说他不常用，那我没好解释这功能了。

运算

所有数据类型都支持等式运算 (== and !=)。 另外，每种数据类型也有其支持的特殊运算符。

数字运算

加 +、减 -、乘 *、除 /和取模 %

数字也支持关系运算（<、>、<=、>=）， 等式运算（==、!=）被所有数据类型支持。

p {
  width: 1in + 8pt;
}

》》》》》》》》》》》》》

p {
  width: 1.111in; }

除法运算和 /

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
》》》》》》》》》》》》》》》》》
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量。 例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
》》》》》》》》》》》》》
p {
  font: 12px/30px; }

颜色运算

p {
  color: #010203 + #040506;
}
》》》》》》》
p {
  color: #050709; }
-----------------------

p {
  color: #010203 * 2;
}
》》》》》》》
p {
  color: #020406; }

-----------------------

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
》》》》》》》
p {
  color: rgba(255, 255, 0, 0.75); }

-----------------------

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
》》》》》》》
p {
  color: rgba(255, 0, 0, 0.9);
  background-color: rgba(255, 0, 0, 0.25); }

-----------------------

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘, startColorstr=‘#{ie-hex-str($green)}‘, endColorstr=‘#{ie-hex-str($translucent-red)}‘);
}
》》》》》》》
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false‘, startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

字符串运算

p {
  cursor: e + -resize;
}
》》》》》》》》》》》
p {
  cursor: e-resize; }

------------------------

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
》》》》》》》》》》》
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

------------------------

p {
  margin: 3px + 4px auto;
}
》》》》》》》》》》》
p {
  margin: 7px auto; }

------------------------

p:before {
  content: "I ate #{5 + 10} pies!";
}
》》》》》》》》》》》
p:before {
  content: "I ate 15 pies!"; }

------------------------

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}
》》》》》》》》》》》
p:before {
  content: "I ate  pies!"; }

布尔运算

支持布尔值做 and、or 和 not 运算。

List Operations

我看文章一直避开这list功能，也许是好东西，只是解释不了？

圆括号

p {
  width: (1em + 2em) * 3;
}
》》》》》》》》》》》》》
p {
  width: 9em; }

函数

p {
  color: hsl(0, 100%, 50%);
}
》》》》》》》》》》
p {
  color: #ff0000; }
p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}这个也可以编译

Interpolation: #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
》》》》》》》》
p.foo {
  border-color: blue; }

-----------------

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
》》》》》》》》》
p {
  font: 12px/30px; }

变量默认值： !default

通过在值的末尾处添加 !default 标记来为其指定。 也就是说，如果该变量已经被赋值， 就不会再次赋值， 但是，如果还没有被赋值，就会被指定一个值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

》》》》》》》》》》》》》》
#main {
  content: "First content";
  new-content: "First time reference"; }

---------------------------------------
$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

》》》》》》》》》》》》》》》
#main {
  content: "Non-null content"; }

我自己在解释一次，在赋值时，如果有值就不会改变，如果没有值（null）会去找suffix 是！default还赋值

@import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

import就和css的一样，scss有多些功能。如果你import “color”，会找到color.scss 或 color.sass

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
>>>>>>>
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了

另个例子：你有个 example.scss

.example {
  color: red;
}
#main {
  @import "example";
}
》》》》》
#main .example {
  color: red;
}

该指令仅允许在文档的基础水平，像@mixin或@charset，未在被@imported嵌套上下文文件允许的。

这是不可能混入或控制指令中嵌套@import。(@ = 指令)

@media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
》》》》》
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

-------

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
》》》》》
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

------

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
》》》》》
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

心里准备一下，这个extend只能用心了，没有什么逻辑啦～只好背了。。。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
》》》》
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

这样设计可以避免bug的出现，如果你要使用seriousError，可以直接调用，因为error和serioursError已经分开了，同时error而赋值于seriourError

如果要扩张，只需对error扩张就行了。如：给error一张背景

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
》》》》
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

　

extend single element　

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
>>>>
a:hover, .hoverlink {
  text-decoration: underline; }

----

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
>>>>
.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

----

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
>>>>
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

----

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
>>>>
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

----

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
>>>>
a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

----

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}
>>>>
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

----

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}
>>>>
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

----

// This ruleset won‘t be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}
>>>>
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

!optional

a.important {
  @extend .notice !optional;
}

如果没有找到.notice 会error，但是加上optional就不会了error了。

@extend in Directives

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

》》》》
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

官方解释@media无法知道@media外的css rules。我才可能是先把error给编译好，这时找没有error

@debug 

@warn

@debug 10em + 12em;
》》》》
Line 1 DEBUG: 22em

Control Directives

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
》》》》
p {
  border: 1px solid; }

----

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
》》》》
p {
  color: green; }

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
》》》》
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@for $var from <start> through <end>

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}
》》》》
.puma-icon {
  background-image: url(‘/images/puma.png‘); }
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘); }
.egret-icon {
  background-image: url(‘/images/egret.png‘); }
.salamander-icon {
  background-image: url(‘/images/salamander.png‘); }

@each $var in <list>

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
》》》》
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Mixin Directives

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
》》》》
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

基本就是这样

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
》》》》
a {
  color: blue;
  background-color: red; }
@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

mixin recursion is forbidden. 被禁止！

Arguments

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }
》》》》
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
》》》》
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

Keyword Arguments

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

在给变量时，可以知道是什么变量。

Variable Arguments

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
》》》》
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
》》》》
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

Passing Content Blocks to a Mixin

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
》》》》
* html #logo {
  background-image: url(/logo.gif);
}

Variable Scope and Content Blocks（暂时理解不了）

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
》》》》
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

Function Directives

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
//#sidebar { width: grid-width($n: 5); }
>>>>
#sidebar {
  width: 240px; }

Output Style

:nested

:expanded

:compact

:compressed

　　　
时间： 2024-10-06 00:15:54

scss 学习笔记的相关文章

scss学习笔记

sass为后缀的文件:写的时候不带大括号和分号: 例子:body font-size:12px scss为后缀的文件:和css一样写的时候带大括号和分号: 导入: sass的导入(@import)规则和css的有所不同,编译时会将@import的scss文件合并进来只生成一个css文件.但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通的css导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在.所有的sass导入文

Sass学习笔记（补充）

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

sass个人学习笔记

Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3cplus.com/sassguide/ 个人先看了 <Sass与Compass实战>(Materliu 是中文翻译之一)后看的视频,看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了 下面是我个人对<Sass与Compass实战>这本书学习笔记总结,有些是个人极端自我

Ionic2学习笔记（6）：NAVIGATION

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html ? ? ? ?Ionic2中创建一个页面很方便,在页面之间相互切换也很方便,我们在实现如下需求: 在主页面创建一个按钮,点击按钮,跳转到一个新页面,在跳转过程中,我们可以也可以在页面之间传递数据. 进入项目目录:cd MyFirstApp 创建一个新页面: ionic g page SecondPage 将@import "../pages/second-page/secon

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

Sass与Compass 学习笔记

Sass与Compass 学习笔记 安装: 1.装sass之前先确认装了ruby ; 2.命令gem install sass *注一般不能正常安装 由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败.这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main