{"action":"created","issue":{"url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/7","repository_url":"https://api.github.com/repos/lbwa/lbwa.github.io","labels_url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/7/labels{/name}","comments_url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/7/comments","events_url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/7/events","html_url":"https://github.com/lbwa/lbwa.github.io/issues/7","id":305071964,"number":7,"title":"Sass 学习心得","user":{"login":"lbwa","id":32980314,"avatar_url":"https://avatars3.githubusercontent.com/u/32980314?v=4","gravatar_id":"","url":"https://api.github.com/users/lbwa","html_url":"https://github.com/lbwa","followers_url":"https://api.github.com/users/lbwa/followers","following_url":"https://api.github.com/users/lbwa/following{/other_user}","gists_url":"https://api.github.com/users/lbwa/gists{/gist_id}","starred_url":"https://api.github.com/users/lbwa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lbwa/subscriptions","organizations_url":"https://api.github.com/users/lbwa/orgs","repos_url":"https://api.github.com/users/lbwa/repos","events_url":"https://api.github.com/users/lbwa/events{/privacy}","received_events_url":"https://api.github.com/users/lbwa/received_events","type":"User","site_admin":false},"labels":[{"id":808809905,"url":"https://api.github.com/repos/lbwa/lbwa.github.io/labels/%E5%B0%8F%E6%8A%80%E5%B7%A7","name":"小技巧","color":"180d89","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-14T09:00:52Z","updated_at":"2018-03-27T14:04:23Z","closed_at":null,"author_association":"OWNER","body":"## 预编译目标格式`.photo-#{list}` \r\n``` css\r\n.author-bio .photo-adam {\r\n  background: url(\"./img.png\") no-repeat;\r\n}\r\n.author-bio .photo-john {\r\n  background: url(\"./img.png\") no-repeat;\r\n}\r\n.author-bio .photo-wynn {\r\n  background: url(\"./img.png\") no-repeat;\r\n}\r\n.author-bio .photo-mason {\r\n  background: url(\"./img.png\") no-repeat;\r\n}\r\n.author-bio .photo-jim {\r\n  background: url(\"./img.png\") no-repeat;\r\n}\r\n```\r\n即形如`.photo-#{list}`的样子，一部分属性键名是个固定的，另一部分键名是某 list 中的某一个字符串。\r\nScss 文件为：\r\n``` css\r\n$list: adam john wynn mason jim // 列表\r\n@mixin author-images {\r\n  @each $author in $list {      // 循环列表每一项\r\n    .photo-#{$author} {         // Scss 插值，#{ 插值内容 }\r\n      background: url('./img.png') no-repeat\r\n    }\r\n  }\r\n}\r\n\r\n.author-bio {\r\n  @include author-images;\r\n}\r\n```\r\n以上方法的一个局限性是，要有另外一个类`.author-bio`来使用`@include`调用混合宏`@mixin`。\r\n\r\n与`@for`、`while`循环相比，`@for $i from <start> through <end> `是在一定的**数值范围**内进行循环；`while`是当`@while 表达式`中表达式为**真**时，就会执行代码块；`@each 变量 in $list`循环的是一个自定义`list`列表。\r\n\r\n## 使用 map 管理变量\r\n\r\n格式如下：\r\n\r\n``` css\r\n$social-colors: (\r\n    dribble: #ea4c89,    // 以逗号分隔\r\n    facebook: #3b5998,\r\n    github: #171515,\r\n    google: #db4437,\r\n    twitter: #55acee     // 最后一对键值对没有逗号结尾\r\n);\r\n```\r\n\r\n其中，格式类似于`JSON`的格式。该数据结构通过键名查找键值。该`map`结构的**优势**在于可集中管理变量，并后期可以很容易的添加或或删除变量数据。\r\n\r\n### map-get($map, $key) 获取数据\r\n\r\n使用`map-get($map, $key)`来获取`$map`中`$key`的数据。若`$map`中不存在`$key`的数据。那么将不会编译该条 CSS，此时，并**不会报错**。为了防止这种情况，在调用`map-get($map, $key)`之前先使用`map-has-key($map,$key)`来检测对应值是否存在。\r\n\r\n### map-has-key($map,$key) 检测是否存在数据\r\n\r\n`map-has-key($map,$key)` 检测是否存在`$key`数据，该函数返回一个布尔值，可在使用`map-get($map, $key)`之前添加一个检测判断以防止因没有对应`$key`数据，而不编译 CSS 的情况。\r\n\r\n格式如下：\r\n``` css\r\n@if map-has-key($social-colors,facebook){  // 判断值是否否存在\r\n    .btn-facebook {\r\n        color: map-get($social-colors,facebook);\r\n    }\r\n} @else {\r\n    @warn \"No color found for facebook in $social-colors map.\"\r\n}\r\n```\r\n为了简化检测值的代码，避免过多的 if 语句，可将判断封装在自定义函数中，代码如下：\r\n\r\n``` css\r\n@function colors($color) {\r\n  @if not map-has-key($social-colors, $color){\r\n    @warn \"No color found for `$color` in $social-colors.\"\r\n  }\r\n  @return map-get($social-colors, $color)  // 返回调用的 map 函数，类似惰性加载机制\r\n}\r\n```\r\n注：可能是在命令行的**开头位置**看见警告信息！\r\n\r\n例如：\r\n\r\n``` bash\r\n$ sass test1.scss --style expanded\r\nWARNING: No color found for baby-color in $social-colors.\r\n         on line 23 of test.scss, in `colors`\r\n         from line 29 of test.scss\r\n\r\n.btn-github {\r\n  color: #171515;\r\n}\r\n```\r\n\r\n### map-keys($map) 结合 $list 使用\r\n\r\n`map-keys($map)`返回`$map`中的所有 key，这些值赋予给一个变量。\r\n\r\n示例为：\r\n``` css\r\n$list: map-keys($social-colors);\r\n```\r\n\r\n之前的自定义函数可修改为：\r\n\r\n``` css\r\n@function colors ($color) {\r\n  $name: map-keys($social-colors);\r\n  @if not index($name, $color) {  // 此处 index() 可替换为 @for 或 @each \r\n    @warn \"#{$color} is not a valid color name.\";\r\n  }\r\n  @return map-get($social-colors, $color);\r\n}\r\n```\r\n\r\n与之前使用`map-has-key($map, $key)`的区别在于，使用`map-keys($map)`返回一个列表（取出所有 key ），是在该列表中查询是否存在对应 key ，而使用`map-has-key($map, $key)`是在`map`中查找对应 key 。\r\n\r\n`map-values($map)`的用法与`map-keys($map)`相似，只是`map-values($map)`是取出所有的 value 值。\r\n\r\n### map-merge($map1, $map2) 合并两个 map\r\n\r\n格式如下：\r\n\r\n``` css\r\n@new-map: map-merge($color, $color1);\r\n```\r\n\r\n其中，当`map1`和`map2`存在相同键名的值对，那么`map2`将覆盖`map1`的数据。\r\n\r\n### map-remove($map, $key) 删除某一 $key 得到新的 map\r\n\r\n``` css\r\n$map:map-remove($social-colors, key-of-remove-item);\r\n```\r\n注意，该方法返回的是一个新的 map 数据结构，对原结构不构成影响。\r\n\r\n## @import\r\n\r\nSass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixin 都可以在主文件中使用。\r\n\r\n## @media\r\n\r\nSass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。"},"comment":{"url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/comments/376537202","html_url":"https://github.com/lbwa/lbwa.github.io/issues/7#issuecomment-376537202","issue_url":"https://api.github.com/repos/lbwa/lbwa.github.io/issues/7","id":376537202,"user":{"login":"lbwa","id":32980314,"avatar_url":"https://avatars3.githubusercontent.com/u/32980314?v=4","gravatar_id":"","url":"https://api.github.com/users/lbwa","html_url":"https://github.com/lbwa","followers_url":"https://api.github.com/users/lbwa/followers","following_url":"https://api.github.com/users/lbwa/following{/other_user}","gists_url":"https://api.github.com/users/lbwa/gists{/gist_id}","starred_url":"https://api.github.com/users/lbwa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lbwa/subscriptions","organizations_url":"https://api.github.com/users/lbwa/orgs","repos_url":"https://api.github.com/users/lbwa/repos","events_url":"https://api.github.com/users/lbwa/events{/privacy}","received_events_url":"https://api.github.com/users/lbwa/received_events","type":"User","site_admin":false},"created_at":"2018-03-27T14:04:23Z","updated_at":"2018-03-27T14:04:23Z","author_association":"OWNER","body":"## 实践技巧\r\n\r\n在使用 mixin 时 宏内有缩写属性时，缩写属性将覆盖宏外部的属性。\r\n\r\n如 mixin 中 background 属性是 background-image background-size background-repeat 等多个属性的缩写，\r\n调用mixin 中的 background 属性时，将覆盖 mixin 外的这三个属性。\r\n\r\n因此，在调用 mixin 后需要修改 mixin 中其中某一项特性下，不建议在 mixin 中包含要修改的项，因为在外部修改的值会被 mixin 中的值覆盖，最后表现为修改某属性失败。"}}
{"actor":{"display_login":"lbwa"}}