[关闭]
@nemos 2017-05-06T02:48:13.000000Z 字数 1341 阅读 818

语言转换

web

sass

  1. /************************** 变量 **************************/
  2. $font-stack:    Helvetica, sans-serif
  3. $primary-color: #333
  5. body
  6.   font: 100% $font-stack
  7.   color: $primary-color
  9. /************************** 嵌套 **************************/
  11. nav
  12.   ul
  13.     margin: 0
  14.     padding: 0
  15.     list-style: none
  17.   li
  19.   a
  20.     display: block
  21.     padding: 6px 12px
  22.     text-decoration: none
  24. /************************** 混合 **************************/
  26. =border-radius($radius)
  27.   -webkit-border-radius: $radius
  28.   -moz-border-radius:    $radius
  29.   -ms-border-radius:     $radius
  30.   border-radius:         $radius
  32. .box
  33.   +border-radius(10px)
  35.  //////////////////////////////////////////////////////////
  37.  .box {
  38.   -webkit-border-radius: 10px;
  39.   -moz-border-radius: 10px;
  40.   -ms-border-radius: 10px;
  41.   border-radius: 10px;
  42. }
  44. /************************** 继承 **************************/
  46. .message
  47.   border: 1px solid #ccc
  48.   padding: 10px
  49.   color: #333
  51. .success
  52.   @extend .message
  53.   border-color: green
  55. .error
  56.   @extend .message
  57.   border-color: red
  59. /************************** 运算 **************************/
  60. .container
  61.   width: 100%
  63. article[role="main"]
  64.   float: left
  65.   width: 600px / 960px * 100%
  67. aside[role="complementary"]
  68.   float: right
  69.   width: 300px / 960px * 100%

参考

官方教程

coffee

参考

jade

  1. pageTitle = "Jade Rocks!"
  2. doctype 5
  3. html(lang="en")
  4.     head
  5.         title= pageTitle 
  6.         script
  7.             console.log("hi");
  8.     body
  9.         p.greeting Hello, World!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Jade Rocks!</title>
  5.     <script>console.log("hi");
  6. </script>
  7.   </head>
  8.   <body>
  9.     <p class="greeting">Hello, World!</p>
  10.   </body>
  11. </html>

参考

learnjade
pug

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注