Sass中嵌套CSS的规则
启航css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID:#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 &# ...
Sass中子组合选择器和同层组合选择器：>、+和~
启航上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。article section { margin: 5px }
article > section { border: 1px solid #ccc }你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。在下例中，你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:header + p { font-size: 1.1em }你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素:article ~ article { border-top: 1px dashed #ccc }这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边，或里层选择器前边 ...
Sass中变量声明
启航sass变量的声明和css属性的声明很像: $highlight-color: #F90; 这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solidblack;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中(如@media或者@font-face块)，情况也是如此:$nav-color: #F90;
nav {
$width: 100px;
...
Sass中变量的引用
启航凡是css属性的标准值(比如说1px或者bold)可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected { border: 1px solid #F90;}看上边示例中的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量:$highlight-color: #F90;$highli ...
快速部署Bootstrap环境
快速部署使用 Bootstrap CDN嵌入4行代码就能完成导入！
步骤一:1行 CSS复制下面的 样式表粘贴到网页 里面，并放在其它CSS文件之前.
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
步骤二:3行 JS全局组件运行在 jQuery 组件上，其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范，并遵循下面代码的先后顺序。
您可以引用 jQuery 精简版,兼容完整版，并无二 ...
Sublime运行代码
起步很多小伙伴使用sublime写前端html文件,但是在浏览器打开时,可能会遇到一些问题
比如,不能点击open in browser 实现在浏览器中打开
今天小编就教大家安装一个插件,实现快捷键在浏览器中打开刚编写的html文件
安装view in browser插件首先,直接就打开软件>
按快捷键 ctrl+shift+P
选择Package Control然后再搜索框输入：pcip
此时我们看见了第一个首选的插件Package Control:Install Package，我们直接回车就好，稍等片刻会再次出现一个搜索框，
安装View In Browser插件输入:view,没有安装的朋友此时框框第一个插件会是[View In Browser],
直接回车即可，如果已经安装了View In Browser插件的会像我一样没有展示那个插件。
设置运行代码快捷键上面我们安装好了view in browser插件，接下来我们开始设置快捷键。
设置的快捷键是”ctrl+shift+b”
点击Preferences > key Bindings
然后在右边空白框的”[]” ...
我的第一个Vue程序
废话不多讲,直接就上代码index.html123456789101112131415161718<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>VueJS Tutorials</title> <link href="styles.css" rel="stylesheet" /> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="vue-app"> <h1>{{ greet('afternoon') }}< ...
jetbrains 系列IDE 使用技巧
谈谈我与 Intellij IDEA 的故事
Intellij IDEA 中我一直在用的几个插件
下面是官方快捷键EditingCtrl + Space Basic code completionAlt + Enter Show intention actions and quick-fixesCtrl + P Parameter info (within method call arguments)Ctrl + Q Quick documentation lookupCtrl + mouse over code Brief InfoCtrl + F1 Show descriptions of error or warning at caretAlt + Insert Generate code…Ctrl + Alt + T Surround with…(if..else, try..catch, for, etc.)Ctrl + J Insert Live templateCtrl + / Comment/uncomment with line commentCtrl + S ...
教你将Visual Studio Code打造成更加强大的sublime
前言:相信很多学习编程的小伙伴都用过sublime编辑器吧,它是一个很小巧并且功能强大的编辑器但是如果有一天你需要使用vscode,可能你很不适应它的一些习惯今天小编就教大家将Visual Studio Code打造成sublime的颜色主题
起步快捷键对于编辑器就相当于八倍镜对于98K
别管别的,在vscode任意界面,直接就按ctrl+shift+P打开命令面板
输入theme
进入首选项->颜色主题,然后直接就选择monokai主题
现在你会神奇的发现,当前主题和sublime一样一样的了呢!
sublime的主题
vscode的主题
Visual Studio Code引入jetbrains快捷键
前言:相信很多学习编程的小伙伴都用过jetbrains系列的ide吧,毕竟它们很专业但是有时候我们可能需要一个更轻量级的ide,比如vscode,刚开始使用,可能你很不适应它的一些快捷键习惯今天小编就教大家将Visual Studio Code打造成轻量级的jetbrains
起步快捷键对于编辑器就相当于八倍镜对于98K
别管别的,在vscode任意界面,直接就按ctrl+shift+k和ctrl+shift+m
在搜索栏中输入intelliJ idea keybindings,并选择第一个
在右边的详情页面,直接点击安装后,重启编辑器即可使用
后续内容更加精彩,请持续关注
