精华内容
下载资源
问答
  • CSS预处理器

    2019-10-10 17:24:39
    1、CSS预处理器定义 CSS预处理器是基于CSS的一种语言,通过工具编译成CSS,添加了很多CSS不具备的特性,能提升CSS文件的组织方式。 2、常见的CSS预处理器有 1、less:基于node.js 2、sass:基于ruby,也有node版本 3...

    1、CSS预处理器定义

    CSS预处理器是基于CSS的一种语言,通过工具编译成CSS,添加了很多CSS不具备的特性,能提升CSS文件的组织方式。

    2、常见的CSS预处理器有

    1、less:基于node.js
    2、sass:基于ruby,也有node版本

    3、CSS预处理器的作用

    1、能够更好的组织CSS代码
    2、提高代码复用性
    3、提高代码可维护性

    4、CSS预处理器的优缺点

    1、优点:提高代码复用性和可维护性
    2、缺点:需要引入编译过程,有一定的学习成本

    5、css预处理器的功能

    1、变量和计算:减少重复代码
    2、嵌套:反映层级和约束
    3、继承extend(生成代码无重复代码,不可传递变量)和混入mixin(生成代码有重复代码,可传递变量)代码片段
    4、循环:适用于复杂有规律的样式
    5、import文件:CSS文件模块化

    展开全文
  • css预处理器

    2021-04-29 21:29:43
    为什么会出现css预处理器 –CSS不是一种编程语言,仅仅只能用来编写网站样式,在web初期时,网站的搭建还比较基础,所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级,css一成不变的写法也渐渐...
    1. 为什么会出现css预处理器
      –CSS不是一种编程语言,仅仅只能用来编写网站样式,在web初期时,网站的搭建还比较基础,所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级,css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量,常量以及其他的编程语法,css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品,于是css预处理器就作为css的扩展,出现在了前端技术中。

    2.常见的css预处理器
    –发展至今,CSS预处理器的技术已经相当成熟,也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种:Sass(Scss), Less, Stylus。

    3.CSS预处理器的方便之处
    –以Sass为例

    –Sass主要的功能有:允许定义变量,允许CSS代码嵌套,函数功能,Mixin,继承等。 这些功能使得编写CSS更加贴合编程语言的习惯,使得CSS代码复用性更高,代码功能更加直观,也更加易于程序员的阅读与维护。

    1. Sass预处理器
      变量
      Sass允许定义变量用于代码复用,使用 $ 进行变量定义。在有使用相同属性的代码块时,可以通过定义一个变量,将复用的属性储存到变量中。当需要统一修改某个属性值时,就无须在代码中挨个去找需要修改的属性,而是直接修改变量即可。

    在公共组件药品说明书中,对组件的边框样式进行了单独设置。此样式也用于组件内部各部分分隔的边框。因此可以将样式存储到一个变量当中进行复用。

    border: 1px solid #EBEEF5
    }
    /deep/.borderLayout > div.showBorder.left {
    border-right: 1px solid #EBEEF5;
    }
    

    通过scss的嵌套规则可以修改为:

    $border: 1px solid #EBEEF5
    /deep/ .borderLayout.showBorder{
    border: $border
    }
    /deep/.borderLayout > div.showBorder.left {
    border-right: $border;
    }
    

    嵌套
    –Sass允许代码嵌套,用于选择后代。相对于css原生的后代选择器,嵌套样式的代码,更加直观。

    /deep/ .ant-anchor-link-active>.ant-anchor-link-title{
    color:#303133
    }
    

    公共组件‘药品说明书’ 的css代码块,用于设置左侧导航栏被鼠标点击选中时,title的显示样式,

    使用嵌套规则将代码进行嵌套之后:

    /deep/ .ant-anchor-link-active{
     .ant-anchor-link-title{
       color:#303133
     }
    }
    

    嵌套之后的代码,更接近js一样的结构,而不再是一整行的选择器。更有利于观察出代码间的各种关系。

    此外,scss的也可以实现属性嵌套以及伪元素嵌套,从而实现更加精简的代码
    Mixin
    在JavaScript等编程语言中,允许将需要复用的代码块编写成一个函数,在有需要的地方就调用这个表达式从而完成代码编写一次就可以完成多次复用的功能。scss的Mixin实现的也是类似的功能。但是Mixin的代码块不产生一个值。
    定义Mixin代码块需要使用 @mixin ,调用一个已定义的Mixin代码块使用@include

    依旧是以药品说明书这个组件的代码说明

    /deep/ .borderLayout > div > .layoutCon {
       overflow: hidden;
       &:hover{ // 此处即为伪元素嵌套
           overflow: auto;
       }
    }
    .m-nav-bar{
       display: flex;
       flex-direction: column;
       overflow: auto;
       height:100%;
       overflow: hidden;
       &:hover{
           overflow: auto;
       }
    }
    

    组件中有两个选择器都出现了同一段css代码块,其作用是隐藏页面中的滚动条,当鼠标hover到所属区域时,滚动条显示。

    隐藏滚动条的代码可以使用mixin单独定义出来,然后再调用。

    @mixin hide-scroll{
     overflow: hidden;
       &:hover{
           overflow: auto;
       }
    }
    
    /deep/ .borderLayout > div > .layoutCon {
      @include hide-scroll;
    }
    
    .m-nav-bar{
    		@include hide-scroll;
       display: flex;
       flex-direction: column;
       overflow: auto;
       height:100%;
    }
    
    展开全文
  • CSS 预处理器

    2017-08-31 09:40:58
    什么是css预处理器?  CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。  通俗的...

    一.什么是css预处理器?

           CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

          通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。


    二.CSS 预处理器语言

    比如说:
    Sass(SCSS)
    LESS
    Stylus
    Turbine
    Swithch CSS
    CSS Cacheer
    DT CSS

    到目前为止,在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀,讨论的也多,对比的也多。



    展开全文
  • Css预处理器

    2019-06-24 16:35:46
    CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级...
    1. 定义
      CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
    2. 语法

    在使用CSS预处理器之前最重要的是了解语法,我只写过stylus,就从网上找了下另外两种语法的格式,与大家对比分享。

    首先Sass和Less都是用的是标准的CSS语法,因此你可以很方便的把已完成的CSS代码转为预处理器识别的代码,Sass默认使用 .sass扩展名,而Less默认使用.Less扩展名。

    一下是两者的语法

    /* style.scss or style.less */
    h1 {
    color: #0982C1;
    }
    你注意到Sass同时也支持老语法,就是不包含花括号和分号的书写格式。

    /* style.sass /
    h1
    color: #0982c1
    然而Stylus支持的语法就更多样性,它默认使用.styl的文件扩展名,下面是Stylus语法。
    /
    style.styl */
    h1 {
    color: #0982C1;
    }

    /* omit brackets */
    h1
    color: #0982C1;

    /* omit colons and semi-colons */
    h1
    color #0982C1
    复制代码

    3.变量

    你可以在CSS预处理中声明变量,并在整个样式单中使用,支持任何类型的变量,例如:颜色、数值(是否包含单位)、文本。然后你可以任意的调取和使用该变量。Sass的变量是必须$开始,然后变量名和值要冒号隔开,跟CSS属性书写格式一致。

    复制代码
    $mainColor: #0982c1;
    $siteWidth: 1024px;
    $borderStyle: dotted;

    body {
    color: $publicColor;
    border: 1px $borderStyle $mainColor;
    max-width: $siteWidth;
    }

    而Less的变量名使用@符号开始:

    @mainColor: #0982c1;
    @siteWidth: 1024px;
    @borderStyle: dotted;

    body {
    color: @publicColor;
    border: 1px @borderStyle @mainColor;
    max-width: @siteWidth;
    }
      Stylus对变量名没有任何限定,你可以是$开始,也可以是任意字符,而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。

    mainColor = #0982c1
    siteWidth = 1024px
    $borderStyle = dotted

    body
    color mainColor
    border 1px $borderStyle mainColor
    max-width siteWidth

    上面三种不同的CSS写法,最终将会生成相同结果:

    body {
    color: #0982c1;
    border: 1px dotted #0982c1;
    max-width: 1024px;
    }
      最容易体现它的好处的是,假设你在CSS中使用同一种颜色数十次,如果你要修改显色,需要找到并修改十次相同的代码,而有了CSS预处理器,修改一个地方就够了。

    4.嵌套关系

    如果你需要在CSS中相同的parent引用多个元素,你需要一遍一遍的去写parent。例如:

    section {
    margin: 10px;
    }
    section nav {
    height: 25px;
    }
    section nav a {
    color: #0982C1;
    }
    section nav a:hover {
    text-decoration: underline;
    }

    然而如果用CSS预处理器,就可以少些很多单词,而且父节点关系一目了然。

    section {
    margin: 10px;

    nav {
    height: 25px;

    a {
      color: #0982C1;
    
      &:hover {
        text-decoration: underline;
      }
    }
    

    }
    }

    stylus还可省略花括号,书写更加方便,根据个人喜好还可删除中间冒号。

    section
    margin: 10px;
    nav
    height: 25px;
    a
    color: #0982C1;
    &:hover
    text-decoration: underline;
    最终生成CSS结果是:
    section {
    margin: 10px;
    }
    section nav {
    height: 25px;
    }
    section nav a {
    color: #0982C1;
    }
    section nav a:hover {
    text-decoration: underline;
    }

    展开全文
  • css预处理器和后处理器CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make...
  • css预处理器和后处理器One of the major advantages to using CSS preprocessors is the mixin, a CSS function to dictate how styles are assigned. They allow conditional logic and arguments, just like any ...
  • css 预处理器选择Working on web sites and web apps that require RTL support is hard because ensuring correct display in RTL is made more difficult by the fact that we either don't have the CSS ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,706
精华内容 9,082
关键字:

css预处理器