§°§ã§ß§à§Ó§í CSS §á§â§Ö§á§â§à§è§Ö§ã§ã§à§â§à§Ó §Ú §Ú§ç §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö §Ó WordPress
3 likes2,457 views
§¥§à§Ü§Ý§Ñ§Õ §ä§à§Þ §Ü§Ñ§Ü §ß§Ñ§é§Ñ§ä§î §â§Ñ§Ò§à§ä§Ñ§ä§î §ã CSS §á§â§Ö§á§â§à§è§Ö§ã§ã§à§â§Ñ§Þ§Ú §Ú §á§Ö§â§Ö§ã§ä§Ñ§ä§î §á§Ú§ã§Ñ§ä§î §é§Ú§ã§ä§í§Û CSS. §°§ã§ß§à§Ó§í §â§Ñ§Ò§à§ä§í §ã Sass, Compass, §Ü§à§Þ§á§Ú§Ý§ñ§è§Ú§ñ, §æ§â§Ö§Û§Þ§Ó§à§â§Ü§Ú, §ä§Ú§á§Ú§é§ß§í§Ö §à§ê§Ú§Ò§Ü§Ú.
![Mixins
@mixin btn() {!
background: #6ee16c:!
color: #ffffff; !
&:hover {!
background: #83e581;!
}!
}!
!
input[type="submit"] {!
@include btn();!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white; }!
! input[type="submit"]:hover {!
! background: #83e581; }!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-20-320.jpg)
![Mixins §ã §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ñ§Þ§Ú
@mixin btn( $bg-color, $text-color ) {!
background: $bg-color;!
color: $text-color; !
&:hover {!
background: lighten( $bg-color, 5% );!
}!
}!
!
input[type="submit"] {!
@include btn( #6ee16c, #fff );!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white; }!
! input[type="submit"]:hover {!
! background: #83e581; }!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-22-320.jpg)
![Mixins
@mixin btn( $bg-color ) {!
background: $bg-color;!
@if ( lightness( $bg-color ) > lightness( #aaaaaa ) ) {!
color: #000;!
} @else {!
color: #fff;!
}!
&:hover {!
background: lighten( $bg-color, 5% );!
}!
}!
!
input[type="submit"] {!
@include btn( #6ee16c );!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white; }!
! input[type="submit"]:hover {!
!background: #83e581; }!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-24-320.jpg)
![@mixin btn( $bg-color ) {!
background: $bg-color;!
color: color-check( $bg-color );!
!
&:hover {!
background: lighten( $bg-color, 5% );!
}!
}!
!
input[type="submit"] {!
@include btn( #6ee16c );!
}!
Mixin with Function
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white; }!
! input[type="submit"]:hover {!
!background: #83e581; }!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-27-320.jpg)
![@extend
input[type="submit"] {!
@extend %btn-green;!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover {!
background: #83e581;!
}!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-32-320.jpg)
![@extend vs @include
input[type="submit"] {!
@include btn( #6ee16c );!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover {!
background: #83e581;!
}!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-33-320.jpg)
![@extend vs @include
input[type="submit"] {!
@include btn( #6ee16c );!
}!
!
button {!
@include btn( #6ee16c );!
}!
Scss CSS
input[type="submit"] {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover {!
background: #83e581;!
}!
button {!
background: #6ee16c;!
color: white;!
}!
button:hover {!
background: #83e581;!
}!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-34-320.jpg)
![@extend vs @include
input[type="submit"] {!
@extend %btn-green;!
}!
!
button {!
@extend %btn-green;!
}!
Scss CSS
input[type="submit"], button {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover, button:hover {!
background: #83e581;!
}!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-35-320.jpg)
![@extend vs @include
input[type="submit"] {!
@extend %btn-green;!
}!
!
// §®§ß§à§Ô§à §Õ§â§å§Ô§Ú§ç §ã§ä§Ú§Ý§Ö§Û!
!
button {!
@extend %btn-green;!
}!
Scss CSS
input[type="submit"], button {!
background: #6ee16c;!
color: white;!
}!
input[type="submit"]:hover, button:hover {!
background: #83e581;!
}!](https://image.slidesharecdn.com/css-preprocessors-wc2014-dmitry-mayorov-140812021848-phpapp02/85/CSS-WordPress-36-320.jpg)
§°§ã§ß§à§Ó§í CSS §á§â§Ö§á§â§à§è§Ö§ã§ã§à§â§à§Ó §Ú §Ú§ç §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö §Ó WordPress
- 1. §°§ã§ß§à§Ó§í CSS §á§â§Ö§á§â§à§è§Ö§ã§ã§à§â§à§Ó §Ú §Ú§ç §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö §Ó WordPress WordCamp Russia 2014 | §¥§Þ§Ú§ä§â§Ú§Û §®§Ñ§Û§à§â§à§Ó
- 2. §¹§ä§à §ä§Ñ§Ü§à§Ö CSS §á§â§Ö§á§â§à§è§Ö§ã§ã§à§â§í?
- 7. lesscss.org
- 10. @imports .sidebar {! margin: 0;! padding: 0;! } Scss CSS .sidebar {! margin: 0;! padding: 0;! }! ! body {! background: #fff;! }! _sidebar.scss @import ¡°_sidebar¡±;! ! body {! background: #fff;! }! style.scss
- 11. §¬§à§Þ§Þ§Ö§ß§ä§Ñ§â§Ú§Ú // Silent comment! ! /* CSS-style comment */! ! /*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen! */! Scss CSS /* CSS-style comment */! ! /*!! Theme Name: Twenty Fourteen Child! Template: twentyfourteen! */! !
- 12. §±§Ö§â§Ö§Þ§Ö§ß§ß§í§Ö $font-family: 'Open Sans', sans-serif;! $text-color: #222222;! ! body {! font-family: $font-family;! color: $text-color;! }! Scss CSS body {! font-family: 'Open Sans', sans-serif;! color: #222222;! }!
- 13. §£§Ý§à§Ø§Ö§ß§ß§í§Ö §ã§ä§â§å§Ü§ä§å§â§í .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! ! a {! text-decoration: none;! }! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post .title a {! text-decoration: none;! }!
- 14. Nested Media Queries .container {! width: 960px;! ! ! @media screen and (max-width: 960px) {! width: 100%! }! }! Scss CSS .container {! width: 960px;! }! ! @media screen and (max-width: 960px) {! .container {! width: 100%;! }! }!
- 15. & a {! font-weight: bold;! &:hover {! text-decoration: underline;! }! }! Scss CSS a {! font-weight: bold;! }! a:hover {! text-decoration: underline;! }!
- 16. §¡§â§Ú§æ§Þ§Ö§ä§Ú§Ü§Ñ height: 20px + 2;! height: 20px - 2;! height: 20px * 2;! height: (20px / 2);! ! Scss CSS height: 22px;! height: 18px;! height: 40px;! height: 10px;!
- 17. §¸§Ó§Ö§ä§Ñ color: lighten(#dd4141, 50%);! color: darken(#dd4141, 30%);! color: saturate(#dd4141, 75%);! color: desaturate(#dd4141, 25%);! Scss CSS color: white;! color: #711414;! color: #ff1f1f;! color: #c15d5d;!
- 18. Submit
- 20. Mixins @mixin btn() {! background: #6ee16c:! color: #ffffff; ! &:hover {! background: #83e581;! }! }! ! input[type="submit"] {! @include btn();! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! ! background: #83e581; }!
- 22. Mixins §ã §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ñ§Þ§Ú @mixin btn( $bg-color, $text-color ) {! background: $bg-color;! color: $text-color; ! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c, #fff );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! ! background: #83e581; }!
- 24. Mixins @mixin btn( $bg-color ) {! background: $bg-color;! @if ( lightness( $bg-color ) > lightness( #aaaaaa ) ) {! color: #000;! } @else {! color: #fff;! }! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! !background: #83e581; }!
- 25. Functions @function color-check( $color ) {! @if (lightness($color) > lightness(#aaaaaa)) {! @return #000;! } @else {! @return #fff;! }! }! ! .foo {! color: color-check( #6ee16c );! }! Scss CSS .foo {! color: white;! }
- 26. §£ §à§Õ§ß§å §ã§ä§â§à§Ü§å @function color-check( $color ) {! @return if( lightness($color) > lightness(#aaaaaa), #000, #fff );! }! ! .foo {! color: color-check( #6ee16c );! }! Scss CSS .foo {! color: white;! }
- 27. @mixin btn( $bg-color ) {! background: $bg-color;! color: color-check( $bg-color );! ! &:hover {! background: lighten( $bg-color, 5% );! }! }! ! input[type="submit"] {! @include btn( #6ee16c );! }! Mixin with Function Scss CSS input[type="submit"] {! background: #6ee16c;! color: white; }! ! input[type="submit"]:hover {! !background: #83e581; }!
- 29. Mixins .btn-blue {! @include btn( #6cb1e1 );! }! .btn-green {! @include btn( #6ee16c );! }! .btn-gray {! @include btn( #ccc );! }! Scss CSS .btn-blue {! background: #6cb1e1;! color: white; }! .btn-blue:hover {! background: #81bce5; }! ! .btn-green {! background: #6ee16c;! color: white; }! .btn-green:hover {! background: #83e581; }! ! .btn-gray {! background: #cccccc;! color: black; }! .btn-gray:hover {! background: #d9d9d9; }!
- 30. Maps $buttons: (! blue: #6cb1e1,! green: #6ee16c, ! red: #eb3b50! );! ! @each $button, $bg-color in $buttons {! .btn-#{$button} {! @include btn( $bg-color );! }! }! Scss CSS .btn-blue {! background: #6cb1e1;! color: white; }! .btn-blue:hover {! background: #81bce5; }! ! .btn-green {! background: #6ee16c;! color: white; }! .btn-green:hover {! background: #83e581; }! ! .btn-gray {! background: #cccccc;! color: black; }! .btn-gray:hover {! background: #d9d9d9; }!
- 31. Map with Placeholder Selector $buttons: (! blue: #6cb1e1,! green: #6ee16c, ! red: #eb3b50! );! ! @each $button, $bg-color in $buttons {! %btn-#{$button} {! @include btn( $bg-color );! }! }! Scss CSS
- 32. @extend input[type="submit"] {! @extend %btn-green;! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }!
- 33. @extend vs @include input[type="submit"] {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }!
- 34. @extend vs @include input[type="submit"] {! @include btn( #6ee16c );! }! ! button {! @include btn( #6ee16c );! }! Scss CSS input[type="submit"] {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover {! background: #83e581;! }! button {! background: #6ee16c;! color: white;! }! button:hover {! background: #83e581;! }!
- 35. @extend vs @include input[type="submit"] {! @extend %btn-green;! }! ! button {! @extend %btn-green;! }! Scss CSS input[type="submit"], button {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover, button:hover {! background: #83e581;! }!
- 36. @extend vs @include input[type="submit"] {! @extend %btn-green;! }! ! // §®§ß§à§Ô§à §Õ§â§å§Ô§Ú§ç §ã§ä§Ú§Ý§Ö§Û! ! button {! @extend %btn-green;! }! Scss CSS input[type="submit"], button {! background: #6ee16c;! color: white;! }! input[type="submit"]:hover, button:hover {! background: #83e581;! }!
- 38. Command Line
- 39. §µ§ã§ä§Ñ§ß§à§Ó§Ü§Ñ Sass §ß§Ñ Mac 1. §°§ä§Ü§â§í§Ó§Ñ§Ö§Þ Terminal 2. §©§Ñ§á§å§ã§Ü§Ñ§Ö§Þ §Ü§à§Þ§Ñ§ß§Õ§å: gem install sass
- 40. §µ§ã§ä§Ñ§ß§à§Ó§Ü§Ñ Sass §ß§Ñ PC 1. §µ§ã§ä§Ñ§ß§Ñ§Ó§Ý§Ú§Ó§Ñ§Ö§Þ Ruby ( http://rubyinstaller.org/ ) 2. §°§ä§Ü§â§í§Ó§Ñ§Ö§Þ Command Prompt 3. §©§Ñ§á§å§ã§Ü§Ñ§Ö§Þ §Ü§à§Þ§Ñ§ß§Õ§å: gem install sass
- 41. §¬§à§Þ§á§Ú§Ý§ñ§è§Ú§ñ Sass 1. §ª§Õ§Ö§Þ §Ó §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§ð §Ô§Õ§Ö §Ý§Ö§Ø§Ú§ä §ß§å§Ø§ß§í§Û §æ§Ñ§Û§Ý cd /Users/Username/Desktop/! 2. §©§Ñ§á§å§ã§Ü§Ñ§Ö§Þ §Ü§à§Þ§Ñ§ß§Õ§å: sass style.scss style.css
- 42. §¡§Ó§ä§à§Þ§Ñ§ä§Ú§é§Ö§ã§Ü§Ñ§ñ §¬§à§Þ§á§Ú§Ý§ñ§è§Ú§ñ Sass 1. §ª§Õ§Ö§Þ §Ó §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§ð §Ô§Õ§Ö §Ý§Ö§Ø§Ú§ä §ß§å§Ø§ß§í§Û §æ§Ñ§Û§Ý cd /Users/Username/Desktop/! 2. §©§Ñ§á§å§ã§Ü§Ñ§Ö§Þ §Ü§à§Þ§Ñ§ß§Õ§å: sass --watch style.scss:style.css
- 43. Software
- 46. koala-app.com
- 49. Frameworks, Mixin Libraries and Tools
- 54. §¢§à§Ý§î§ê§Ñ§ñ §Ò§Ú§Ò§Ý§Ú§à§ä§Ö§Ü§Ñ? §á§à§Ý§Ö§Ù§ß§í§ç mixins §Ú §æ§å§ß§Ü§è§Ú§Û
- 55. image-width() & image-height() .selector {! /slideshow/css-preprocessorswc2014dmitrymayorov/37900233/$image: 'testpattern.gif';! background: url(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/$image);! width: image-width(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/$image);! height: image-height(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/$image);! }! Scss CSS .selector {! background: url(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/"testpattern.gif");! width: 640px;! height: 480px;! }!
- 56. headings() #{headings()} {! font-weight: bold;! }! Scss CSS h1, h2, h3, h4, h5, h6 {! font-weight: bold;! }!
- 57. enumerate() .selector {! #{enumerate(".col", 1, 6)} {! margin: 0;! padding: 0;! }! }! Scss CSS .selector .col-1,! .selector .col-2,! .selector .col-3,! .selector .col-4,! .selector .col-5,! .selector .col-6 {! margin: 0;! padding: 0;! }!
- 58. URL helpers
- 59. con?g.rb http_path = "/"! css_dir = "stylesheets"! sass_dir = "sass"! images_dir = "img"! javascripts_dir = "javascripts"! ! output_style = :expanded! ! # relative_assets = true! ! line_comments = false!
- 60. image-url() .selector {! background: image-url("background.jpg");! }! Scss CSS .selector {! background: url(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/&);! }!
- 61. con?g.rb http_path = "/"! css_dir = "stylesheets"! sass_dir = "sass"! images_dir = "img"! javascripts_dir = "javascripts"! ! output_style = :expanded! ! relative_assets = true! ! line_comments = false!
- 62. image-url() .selector {! background: image-url("background.jpg");! }! Scss CSS .selector {! background: url(/slideshow/css-preprocessorswc2014dmitrymayorov/37900233/&);! }!
- 65. §²§Ñ§ã§ê§Ú§â§Ö§ß§Ú§ñ 1. Susy (susy.oddbird.net) ? §¢§à§Ý§î§ê§Ö §é§Ö§Þ §á§â§à§ã§ä§à Grid Framework 2. Sass Modular Scale (github.com/Team-Sass/modular-scale)? §ª§ß§ã§ä§â§å§Þ§Ö§ß§ä §Õ§Ý§ñ §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §Þ§à§Õ§å§Ý§î§ß§í§ç §ã§Ö§ä§à§Ü 3. Breakpoint (breakpoint-sass.com/)? §ª§ß§ã§ä§â§å§Þ§Ö§ß§ä §Õ§Ý§ñ §â§Ñ§Ò§à§ä§í §ã §Þ§Ö§Õ§Ú§Ñ-§Ó§í§â§Ñ§Ø§Ö§ß§Ú§ñ§Þ§Ú
- 70. §²§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ß§Ú§Ö §æ§Ñ§Û§Ý§Ñ style.css §Ó §ä§Ö§Þ§Ñ§ç WordPress
- 71. §¬§Ñ§Ü §Ó§ß§à§ã§Ú§ä§î §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §Ó §ä§Ö§Þ§í 1. Child Themes 2. §®§à§Õ§å§Ý§î §³ustom CSS §á§Ý§Ñ§Ô§Ú§ß§Ñ Jetpack
- 73. // Core variables and mixins! @import "variables.less";! @import "mixins.less";! ! // Reset and dependencies! @import "normalize.less";! @import "print.less";! @import "glyphicons.less";! ! // Core CSS! @import "scaffolding.less";! @import "type.less";! @import "code.less";! @import "grid.less";! @import "tables.less";! @import "forms.less";! @import "buttons.less";! ! // Components! @import "component-animations.less";! @import "dropdowns.less";! @import "button-groups.less";! @import "input-groups.less";! @import "navs.less";! @import "navbar.less";! @import "breadcrumbs.less";! @import "pagination.less";! @import "pager.less";! @import "labels.less";! @import "badges.less";! @import "jumbotron.less";! @import "thumbnails.less";! @import "alerts.less";! @import "progress-bars.less";! @import "media.less";! @import "list-group.less";! @import "panels.less";! @import "responsive-embed.less";! @import "wells.less";! @import "close.less";! ! // Components w/ JavaScript! @import "modals.less";! @import "tooltip.less";! @import "popovers.less";! @import "carousel.less";! ! // Utility classes! @import "utilities.less";! @import "responsive-utilities.less";! // Core variables and mixins! @import "variables.less";! @import "mixins.less";! ! // Reset and dependencies! @import "normalize.less";! @import "print.less";! ! // Core CSS! @import "scaffolding.less";! @import "type.less";! @import "code.less";! @import "grid.less";! @import "tables.less";! @import "forms.less";! @import "buttons.less";!
- 75. Nesting .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! ! a {! text-decoration: none;! }! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post .title a {! text-decoration: none;! }!
- 76. Nesting .post {! margin: 0;! ! .title {! font-size: 2em;! font-weight: normal;! }! a {! text-decoration: none;! }! }! Scss CSS .post {! margin: 0;! }! .post .title {! font-size: 2em;! font-weight: normal;! }! .post a {! text-decoration: none;! }!
- 77. What¡¯s next 1. §¥§à§Ü§å§Þ§Ö§ß§ä§Ñ§è§Ú§ñ Sass - sass-lang.com 2. §¥§à§Ü§å§Þ§Ö§ß§ä§Ñ§è§Ú§ñ LESS - lesscss.org 3. CSS-TRICKS - css-tricks.com 4. Tuts+ - tutsplus.com 5. The Sass Way - thesassway.com 6. Hugo Giraudel - hugogiraudel.com 7. Sass For Web Designers - www.abookapart.com