CleverCSS是什么?

CleverCSS是一个用于css的小型标记语言,从Python得到灵感,采用通过简单和干净的结构方式,它可用于以整洁和结构化的方式创建一个样式表;CleverCSS与CSS最明显的区别是句法,它基于缩进而且不单调。

CleverCSS是什么?

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。

CleverCSS与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

一个小例子:

ul#comments, ol#comments:  margin: 0  padding: 0  li:    padding: 0.4em    margin: 0.8em 0 0.8em    h3:      font-size: 1.2em    p:      padding: 0.3em    p.meta:      text-align: right      color: #ddd

登录后复制

但是,你也可以使用属性:

立即学习“前端免费学习笔记(深入)”;

#main p:   font->    family: Verdana, sans-serif    size: 1.1em    style: italic

登录后复制

定义常量:

background_color = #ccc #main:  background-color: $background_color

登录后复制

隐式串接:

padding: $foo + 2 + 3 $foo - 2 // returns: padding: 15 8; if $foo is 10

登录后复制

计算:

// calculations with numbers / values42px + 2                    -> 44px10px * 2                    -> 20px1cm + 1mm                   -> 11mm(1 + 2) * 3                 -> 9 // string concatenationfoo + bar                   -> foobar"blub blah" + "baz"         -> 'blub blahbaz' // You can also calculate with numbers:#fff - #ccc                 -> #333333cornflowerblue - coral      -> #00169d // You can also add or subtract a number from it and it will do so for all three channels (red, green, blue):crimson - 20                -> #c80028

登录后复制

更多编程相关知识,请访问:编程教学!!

以上就是CleverCSS是什么?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2884505.html

(0)
上一篇 2025年3月10日 20:29:17
下一篇 2025年2月24日 09:17:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css实现倒计时效果

    一、实现效果截图 (学习视频推荐:css视频教程) 二、实现原理  立即学习“前端免费学习笔记(深入)”; 看到上图效果应该很容易猜到原理,纯CSS的话使用轮播。通过改变图片的margin-top,再加上亿点点动画,亿点点数字图片,就实现了…

    2025年3月10日 编程技术
    200
  • 你可能还不知道的7个惊人的css属性!

    推荐教程:CSS视频教程 学习CSS是构建好看网页的一种方式。 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性。 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西。 因此,在这篇文章中,向你介绍…

    2025年3月10日 编程技术
    200
  • 响应式css前端框架有哪些

    响应式css前端框架有:1、Semantic UI Framework;2、Less Framework;3、Foundation Framework;4、UIkit Framework;5、YUI Framework。 常用的响应式css…

    2025年3月10日
    200
  • css盒模型有哪些属性

    css盒模型的属性有:1、margin属性;2、border属性;3、transparent属性;4、padding属性。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 CSS盒模型是定义元素周围的间隔、尺寸…

    2025年3月10日
    200
  • css中的animation是什么

    css中的animation是一个简写属性,用于设置动画属性,如【animation-duration】,规定完成动画所花费的时间,该属性必须规定,否则动画时长为0,无法播放。 本教程操作环境:windows10系统、css3,本文适用于所…

    2025年3月10日
    200
  • css为什么会出现清除浮动的问题

    css出现清除浮动的问题的原因:在标准流下面,父元素没有设置高度属性,且父元素中的子元素是浮动,由于浮动元素不再占用原文档流的位置,浮动元素的高度不会计算在父元素的高度中,即呈现塌陷的状态。 本教程操作环境:windows10系统、css3…

    2025年3月10日
    200
  • css怎么改变hr标签颜色

    css改变hr标签颜色的方法:可以利用background-color属性,并结合border和height属性来实现。border属性是为了防止出现黑框,height属性是为了防止在firefox下不显示。 首先我们要知道,如果要修改hr…

    2025年3月10日
    200
  • css圆角属性是什么

    css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角。 圆角…

    2025年3月10日 编程技术
    200
  • css如何让盒子浮动

    css让盒子浮动的方法:可以利用float属性来实现,如【float: left;】。float属性可以让多个盒子水平排列成一行、居左或居右,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定。 盒子的浮动 在标准流中,一个块级元素在水…

    2025年3月10日
    200
  • css怎么控制字间距

    css控制字间距的方法是:利用letter-spacing属性来进行控制,如【h1 {letter-spacing:2px;}】。letter-spacing属性用于增加或减少字符间的空白(字符间距)。 本教程操作环境:windows10系…

    2025年3月10日
    200

发表回复

登录后才能评论