今日学习
SASS
typescript
收获
1.SASS
1.SASS是什么
Sass，英文全称为 “Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些 CSS 语法不具有的新特性。Sass 简化了 CSS，这让维护样式表变得更容易。
2.SASS刷题（fcc）
用 Sass 变量存储数据
Sass 不同于 CSS 的一个特点是它允许使用变量。 可以在 Sass 中声明变量，并为它赋值，就像在 JavaScript 中一样。
在 JavaScript 中，变量是使用?let?和?const?关键字定义的。 在 Sass 中，变量以?$?开头的，后跟变量名。
<style type='text/scss'>
$text-color:red; //这里声明变量
.header{
text-align: center;
}
.blog-post, h2 {
color: $text-color; //这里使用了变量
}
</style>
<h1 class="header">Learn Sass</h1>
<div class="blog-post">
<h2>Some random title</h2>
<p>This is a paragraph with some random text in it</p>
</div>
<div class="blog-post">
<h2>Header #2</h2>
<p>Here is some more random text.</p>
</div>
<div class="blog-post">
<h2>Here is another header</h2>
<p>Even more random text within a paragraph</p>
</div>
用 Sass 嵌套 CSS
Sass 允许 CSS 规则的嵌套，这在组织样式表的时候会很有用。
<style type='text/scss'>
.blog-post {
h1 {
text-align: center;
color: blue;
}
p {
font-size: 20px;
}
}
</style>
<div class="blog-post">
<h1>Blog Title</h1>
<p>This is a paragraph</p>
</div>
用 Mixins 创建可重用 CSS
在 Sass 中，mixin?是一组 CSS 声明，可以在整个样式表中重复使用。
引例：CSS 的新功能需要一段时间适配后，所有浏览器后才能完全使用。 随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。 考虑?box-shadow：
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
对于所有具有?box-shadow?属性的元素重写此规则，或者更改每个值以测试不同的效果，需要花费大量的精力。 Mixins 就像 CSS 的函数。 以下是一个例子：
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
定义以?@mixin?开头，后跟自定义名称。 参数（$x，$y，$blur，以及上例中的?$c?）是可选的。 现在在需要?box-shadow?规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过?@include?指令调用。
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
题解代码：
<style type='text/scss'>
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
#awesome {
width: 150px;
height: 150px;
background-color: green;
@include border-radius(15px);
}
</style>
<div id="awesome"></div>
使用 @if 和 @else 为样式添加逻辑
用法见题解：
<style type='text/scss'>
@mixin border-stroke($val) {
@if $val == light {
border: 1px solid black;
}
@else if $val == medium {
border:3px solid black;
}
@else if $val == heavy {
border:6px solid black;
}
@else {
border:none;
}
}
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>
<div id="box"></div>
使用 @for 创建一个 Sass 循环
可以在 Sass 中使用?@for?循环添加样式，它的用法和 JavaScript 中的?for?循环类似。
@for?以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始?to?结束”不包括结束数字，而“开始?through?结束”包括?结束号码。
这是一个开始?through?结束的示例：
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
#{$i}?部分是将变量（i）与文本组合成字符串的语法。 当 Sass 文件转换为 CSS 时，它看起来像这样：
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
题解：
<style type='text/scss'>
@for $i from 1 to 6{
.text-#{$i} {font-size: 15px * $i}
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
使用 @each 遍历列表中的项目
上一个挑战显示了?@for?指令如何通过起始值和结束值循环一定次数。 Sass 还提供?@each?指令，该指令循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值。
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
map 的语法略有不同。 这是一个例子：
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
请注意，需要用?$key?变量来引用 map 中的键。 否则，编译后的 CSS 将包含?color1，color2...... 以上两个代码示例都转换为以下 CSS：
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
题解：
//方式1：
<style type='text/scss'>
@each $color in blue,black,red {
.#{$color}-bg {background-color: $color}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
//方式2：
<style type='text/scss'>
$colors: (color1: blue,color2: black,color3: red);
@each $key, $color in $colors {
.#{$color}-bg {background-color: $color}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
使用 @while 循环创建样式
Sass 中的?@while?指令与 JavaScript 中的?while?类似。 只要满足条件，它就会一直创建 CSS 代码。
<style type='text/scss'>
$x: 1;
@while $x < 6{
.text-#{$x} {font-size: 15px * $x}
$x: $x + 1;
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
用 Partials 将样式分成小块
Sass 中的?Partials?是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中，以保持代码结构规整且易于管理。
partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 此外，Sass 文件以?.scss?文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中，使用?@import?指令。
请注意，import?语句中不需要下划线——Sass 知道它是 partial。 将 partial 导入文件后，可以使用所有变量、mixins 和其它代码。
@import 'variables';
将一组 CSS 样式扩展到另一个元素
Sass 有一个名为?extend?的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
<style type='text/scss'>
h3{
text-align: center;
}
.info{
width: 200px;
border: 1px solid black;
margin: 0 auto;
}
.info-important{
@extend .info;
background-color: magenta;
}
</style>
<h3>Posts</h3>
<div class="info-important">
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>
<div class="info">
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>
2.Typescript
1.什么是typescript
官网简介：
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
换句话说，Typescript可以使用javascript语法，但是他也有自己得“私货”。
2.typescript的运行
首先要经过编译器编译，生成一个js文件，然后使用node命令调用
3.基础使用
? ? ? ? 1.hello world示例
????????先创建一个app.ts文件，写入代码
var message:string = "Hello World"
console.log(message)
? ? ? ? 在VSCode中打开终端，使用命令
tsc app.ts
? ? ? ? 这时候会生成一个app.js文件，使用命令
node app.js
? ? ? ? 即可输出hello world
|