你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"CSS预处理器"之中，我自己最喜欢SA...
写在前面： 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细一点。引入bootstrap1. 下载所需要的bootstrap文件。将要使用的bootstrap文件放入src目录下的assets文件夹中。2. 在入口文件src/main.js中引入bootstrapimport ./assets/bootstrap-3.3.7-dist/css/bootstra...
首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less，sass，postcss）。 一起走进bootstrap v4 sass 1、bootstrap的sass文件都放在scss目录，为什么名字是scss而不是sass呢？主要涉及到sass与scss两种语法的区别，scss语法更接近css，所以更受大家喜爱，使用更广泛。具体可参考 sass 语法 2、scss文件分为两种，一种是以下划线开头的如 _variables.scss ，一种是没有下划线的如 bo...
有些人想学CSS，不知如何下手；有些人已经学会CSS的各种属性，却不知如何运用；有些人会平面设计，不知道如何与网页设计结合；有些人会HTML，就是学不会CSS。试问自己，图中的技术你都会了吗？ 别总是怨天尤人了，CSS高效开发实战?CSS 3、LESS、SASS、Bootstrap、Foundation--------写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本，确保所讲...
技术的新发展，除计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度？不知道如何上手，只懂一点基础的CSS语法，在移动互联时代，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！ 5.1 设定背景图的大小 在CSS 3出现之前，背景图片的...
CSS 3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中书写的顺序来定，最先写的背景在最上层，每层图片定义使用英文逗号隔开。 例如下面的代码： background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat; 根据代码可...
线性渐变可以设置3个参数值：方向、起始颜色、结束颜色。最简单的模式只需要定义起始颜色和结束颜色，起点、终点和方向默认自元素的顶部到底部。下面举例说明： .test{ background:linear-gradient(red, blue);} 上述代码的效果如图5.9所示。 图5.9 最简单的线性渐变效果 如果要在一些旧版本的浏览器（除IE）下可以正常显示如图5.9的效果，则需要添加兼容代码： .test { background:-webkit-linear-gradient(re...
相比传统的图片背景来说，使用CSS构造背景色不仅可以降低网络传输的开销，更由于其尺寸的可控性受到开发者的青睐。 如设计师设计了一张背景图片作为标题背景，如图5.18所示。对于用电脑浏览网页的用户来说，标题基本不存在折行现象，布局也基本是固定宽度的，因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示，标题根据长度不同可能占1行，也可能占3行，如果采用图片就必须根据不同的情况放不同的背景图，实现...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时，要选上include system path,这样就会自动将node.js执行添加到windows系统环境变量,免去手动创建烦恼.node.js就点下一步安装就行了 2. win+R cmd 再运行 gem install bootstrap-sass 3.创建一个项目 cd 进入到你所在的项目存放目录,命令行窗口运行 compass creat XXXXX(项目名称）这样就创建了一个项目会生成如下所示目录 4.右键打开 config.rb 在r...
解读bootstrap v4 sass设计 首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less，sass，postcss）。 其次本篇文章主要围绕下面几个目标展开： 了解bootstrap 4整个sass的设计 如何使用并修改bootstrap v4的样式 如何改进bootstrap的sass设计 最后不深入具体代码的实现细节，只从整体架构上分析 一起走进bootstrap v4 sass 1、bootstrap的...
安全研究人员在官方的 RubyGems 库发现了后门版本的网站开发工具 bootstrap-sass。该工具的下载量高达 2800 万次，但这并不意味着下载的所有版本都存在后门，受影响的版本是 v3.2.0.3，研究人员呼吁用户尽可能快的更新，认为可能有数千应用受到影响。 研究人员推测，******了开发者的机器或窃取了开发者的凭证，然后通过开发者账号简单上传了一个后门版本。该后门允许***者远程执行代码。此类的供应链***正成为一个日益增长的危...