-
Sass中变量声明
启航sass变量的声明和css属性的声明很像: $highlight-color: #F90; 这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solidblack;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"、He...…
-
Sass中子组合选择器和同层组合选择器：>、+和~
启航上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。article section { margin: 5px }article > section { border: 1px solid #ccc }你可以用子组合选择器>选择一个元素的直接子元素。上例中，第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。在下例中，你可以用同层相邻组...…
-
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时会帮你...…
-
Sass中嵌套属性
启航在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border:nav { border: { style: solid; width: 1px; color: #ccc; }}嵌套属性的规则是这样的:把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子...…
-
关于Sass变量名用中划线还是下划线分隔问题
开门见山这个问题说白了就是你爱用啥用啥,都通用的sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color)，而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍，这也是compass和本文都用的方式。不过，sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着...…
-
Sass中群组选择器的嵌套
启航在CSS里边，选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.buttonbutton会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。.button, button { margin: 0;}当看到上边这段代码时，你可能还没意识到会有重复性的工作。但会很快发现:如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了。css的写法会让你在群组选择器中的每一个...…
-
Sass中父选择器的标识符&
启航 一般情况下，sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content aside)。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。最常见的一种情况是当你为链接之类的元素写:hover这种伪类时，你并不希望以后代选择器的...…
-
啥是静默注释(在sass中)
css中的注释css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。sass中的注释sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。body { color: #333; // 这种注释内容不会出现在生成的c...…
-
啥是Layui
开始使用layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需...…
-
Bootstrap 编程实战闯关
AA默认护眼夜间 阅读(125.3k) 书签 赞(36) 分享 我要纠错 收录专题 Bootstrap 编程实战闯关由 843622626 创建，Carrie 最后一次修改 2016-10-27 为了帮助广大学习者，做到学以致用，我们为大家准备了大量的Bootstrap编程实战题，通过这些实战题，您可以一边学习一边操作，来达到巩固学习的...…
-
Bootstrap介绍
Bootstrap 简介 为什么使用 Bootstrap？ Bootstrap 包的内容Bootstrap 简介什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 目前的最新版本是 Bootstrap4，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法...…
-
前端相关优质项目推荐
优站精选 Bootstrap 网站实例 Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。 ...…
-
来到兄弟会的第38天
充实的一天今天学习了sass和bootstrap前端的框架太多了，多到学不完，全知道他是啥都得一会儿每日博文 2019-09-20 » Sass中变量的引用 2019-09-20 » Sass中变量声明 ...…
-
兄弟会 - 阶段感悟
阶段感悟今天是我来到兄弟会的第37天,回顾前两个阶段,有过辛苦,也有过欢乐.总之,学到的内容很丰富,过的很充实所有成功的背后，都是苦苦堆积的坚持；所有人前的风光，都是背后傻傻的不放弃;关于自学有些同学想,我们不就是自学嘛?有什么的.我认为这种模式不是适合所有的同学的,对于有些同学自学的效率高,而对于绝大数同学还是需要有老师来教,给定具体的作业任务才能更加高效的学习,而我们不仅仅是自学,在这里我们不仅仅是自学模式和项目驱动,最重要的是对于我们学习能力和处理问题能力的一种培养,就像开班时候教练...…
-
兄弟会 - 阶段感悟汇总
齐健组： 齐 健：https://qijian160.github.io/posts/2019-09-19-integer-ultrices-elit-sit-amet 杨 鑫：https://yangxin19970404.github.io/2019/09/19/%E6%97%A5%E6%8A%A5/ 陈佳兴：https://xjx19970831.github.io/aba-...…
-
快速部署Bootstrap环境
快速部署使用 Bootstrap CDN嵌入4行代码就能完成导入！步骤一:1行 CSS复制下面的 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前.<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j...…
-
来到兄弟会的第37天
充实的一天今天写了一个关于这个阶段的感悟和总结:兄弟会 - 阶段感悟心里有很多话想说,只是鉴于天凯他着急统计,就简单的写了点儿每日总结今天学习了sass ,能够上手编写scss文件来对css进行生成写了两个vue 的实例,选项卡和价格订单的统计bootstrap简单的看了看,暂时只是能用他的样式而已…
-
Sublime运行代码 open in browser快捷键设置
起步很多小伙伴使用sublime写前端html文件,但是在浏览器打开时,可能会遇到一些问题比如,不能点击open in browser 实现在浏览器中打开今天小编就教大家安装一个插件,实现快捷键在浏览器中打开刚编写的html文件安装view in browser插件首先,直接就打开软件>按快捷键 ctrl+shift+P选择Package Control然后再搜索框输入：pcip此时我们看见了第一个首选的插件Package Control:Install Package，我们直接回车...…
-
WebStrom实时预览功能--Chrome
版权声明：本文为CSDN博主「liumengwei1」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/liumengwei1/article/details/783405181.配置WebStrom 2.chrome安装插件jetbrainside support3.chrome插件jetbrains ide support配置 4.webstromdeb...…
-
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...…
