From a6ae41958fd4763c9a56022c862db371eabd2b16 Mon Sep 17 00:00:00 2001 From: Nikolay Gromov Date: Fri, 25 Jan 2019 17:12:41 +0300 Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D1=8B=20=D1=81=20LESS=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D1=8B=20?= =?UTF-8?q?=D1=81=20SCSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 74 +++++++++++++++++++++++++++--------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index d65c228..23c93c5 100644 --- a/index.html +++ b/index.html @@ -287,12 +287,12 @@

Один БЭМ-блок = один файл

В файловой системе при работе с CSS-препроцессорами каждый БЭМ-блок должен быть описан в своём отдельном файле.

- 
// файл slider.less
+      
// файл slider.scss
 .slider {
   ...
 }
  
-// файл promo.less
+// файл promo.scss
 .promo {
   ...
 }

@@ -342,7 +342,7 @@ 
Файловая организация

   blocks/              # папка с БЭМ-блоками
     page-header/       # папка БЭМ-блока
       img/             # картинки, используемые в БЭМ-блоке
-      page-header.less # стилизация БЭМ-блока
+      page-header.scss # стилизация БЭМ-блока
       page-header.html # разметка БЭМ-блока (не обязательно)
       page-header.js   # доп. интерактив БЭМ-блока (не обязательно)
     page-footer/       # папка БЭМ-блока
@@ -350,8 +350,8 @@ 
Файловая организация

     ...
   less/
     mixins/            # папка с примесями
-    style.less         # диспетчер подключений (только импорты)
-    variables.less     # переменные проекта
+ style.scss # диспетчер подключений (только импорты) + variables.scss # переменные проекта
@@ -360,26 +360,26 @@

Файловая организация

@import

- 
// style.less
-@import 'variables.less';           // правильно
-@import 'mixins.less';              // правильно
+      
// style.scss
+@import 'variables.scss';           // правильно
+@import 'mixins.scss';              // правильно
  
-@import '../blocks/page-header/page-header.less';   // правильно
-@import '../blocks/page-footer/page-footer.less';   // правильно
+@import '../blocks/page-header/page-header.scss';   // правильно
+@import '../blocks/page-footer/page-footer.scss';   // правильно
  
-@import 'responsive-imports.less';  // неправильно, если внутри этого файла есть импорты
-@import 'top-part-page.less';       // неправильно, если нет такого БЭМ-блока
+@import 'responsive-imports.scss';  // неправильно, если внутри этого файла есть импорты
+@import 'top-part-page.scss';       // неправильно, если нет такого БЭМ-блока
  
 // неправильно, импорт внутри @media
-@media screen and (min-width: @laptop-min) {
-  @import '../blocks/promo/promo.less';
+@media screen and (min-width: $laptop-min) {
+  @import '../blocks/promo/promo.scss';
 }
@@ -426,16 +426,16 @@

@media

display: block; // Хорошо: условие очевидно, в переменной только ширина - @media (min-width: @screen-md) { + @media (min-width: $screen-md) { display: none; } - @media (min-width: @screen-lg) { + @media (min-width: $screen-lg) { display: block; } // Плохо: условие целиком вынесено в переменную (неочевидность) - @media (@mobile-width) { + @media ($mobile-width) { display: block; } } @@ -498,7 +498,7 @@

Очередность написания в контексте селект position: relative; display: block; - @media (min-width: @screen-lg) { ... } + @media (min-width: $screen-lg) { ... } &:before { ... } @@ -510,14 +510,14 @@

Очередность написания в контексте селект &:before { ... } - @media (min-width: @screen-md) { ... } + @media (min-width: $screen-md) { ... } } &--large { .page-header__item { ... } - @media (min-width: @screen-md) { ... } + @media (min-width: $screen-md) { ... } } } @@ -542,27 +542,27 @@

Переменные

- 
@color-main:                  #0275d8;
-@color-success:               #5cb85c;
-@color-danger:                #d9534f;
+      
$color-main:                  #0275d8;
+$color-success:               #5cb85c;
+$color-danger:                #d9534f;
  
-@text-color:                  @gray-darkest;
-@text-color--muted:           @gray;
+$text-color:                  $gray-darkest;
+$text-color--muted:           $gray;
  
-@font-size:                   1.6rem;
-@font-size--h1:               3rem;
+$font-size:                   1.6rem;
+$font-size--h1:               3rem;
 ...
-@font-size--small:            0.75em;
+$font-size--small:            0.75em;
  
-@line-height:                 1.375em;
+$line-height:                 1.375em;
  
-@font-family:                 'Roboto', Arial, sans-serif;
+$font-family:                 'Roboto', Arial, sans-serif;
  
-@screen-xs:                   0;
-@screen-sm:                   480px;
-@screen-md:                   768px;
-@screen-lg:                   992px;
-@screen-xl:                   1200px;

+$screen-xs:                   0;
+$screen-sm:                   480px;
+$screen-md:                   768px;
+$screen-lg:                   992px;
+$screen-xl:                   1200px;
@@ -601,7 +601,7 @@

Примеси

Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); !function(e){var t={variable:[{pattern:/\$?\(\([\w\W]+?\)\)/,inside:{variable:[{pattern:/(^\$\(\([\w\W]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b-?(?:0x[\dA-Fa-f]+|\d*\.?\d+(?:[Ee]-?\d+)?)\b/,operator:/--?|-=|\+\+?|\+=|!=?|~|\*\*?|\*=|\/=?|%=?|<<=?|>>=?|<=?|>=?|==?|&&?|&=|\^=?|\|\|?|\|=|\?|:/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\([^)]+\)|`[^`]+`/,inside:{variable:/^\$\(|^`|\)$|`$/}},/\$(?:[a-z0-9_#\?\*!@]+|\{[^}]+\})/i]};e.languages.bash={shebang:{pattern:/^#!\s*\/bin\/bash|^#!\s*\/bin\/sh/,alias:"important"},comment:{pattern:/(^|[^"{\\])#.*/,lookbehind:!0},string:[{pattern:/((?:^|[^<])<<\s*)(?:"|')?(\w+?)(?:"|')?\s*\r?\n(?:[\s\S])*?\r?\n\2/g,lookbehind:!0,greedy:!0,inside:t},{pattern:/(["'])(?:\\\\|\\?[^\\])*?\1/g,greedy:!0,inside:t}],variable:t.variable,"function":{pattern:/(^|\s|;|\||&)(?:alias|apropos|apt-get|aptitude|aspell|awk|basename|bash|bc|bg|builtin|bzip2|cal|cat|cd|cfdisk|chgrp|chmod|chown|chroot|chkconfig|cksum|clear|cmp|comm|command|cp|cron|crontab|csplit|cut|date|dc|dd|ddrescue|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|du|egrep|eject|enable|env|ethtool|eval|exec|expand|expect|export|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|getopts|git|grep|groupadd|groupdel|groupmod|groups|gzip|hash|head|help|hg|history|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|jobs|join|kill|killall|less|link|ln|locate|logname|logout|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|make|man|mkdir|mkfifo|mkisofs|mknod|more|most|mount|mtools|mtr|mv|mmv|nano|netstat|nice|nl|nohup|notify-send|npm|nslookup|open|op|passwd|paste|pathchk|ping|pkill|popd|pr|printcap|printenv|printf|ps|pushd|pv|pwd|quota|quotacheck|quotactl|ram|rar|rcp|read|readarray|readonly|reboot|rename|renice|remsync|rev|rm|rmdir|rsync|screen|scp|sdiff|sed|seq|service|sftp|shift|shopt|shutdown|sleep|slocate|sort|source|split|ssh|stat|strace|su|sudo|sum|suspend|sync|tail|tar|tee|test|time|timeout|times|touch|top|traceroute|trap|tr|tsort|tty|type|ulimit|umask|umount|unalias|uname|unexpand|uniq|units|unrar|unshar|uptime|useradd|userdel|usermod|users|uuencode|uudecode|v|vdir|vi|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yes|zip)(?=$|\s|;|\||&)/,lookbehind:!0},keyword:{pattern:/(^|\s|;|\||&)(?:let|:|\.|if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)(?=$|\s|;|\||&)/,lookbehind:!0},"boolean":{pattern:/(^|\s|;|\||&)(?:true|false)(?=$|\s|;|\||&)/,lookbehind:!0},operator:/&&?|\|\|?|==?|!=?|<<>|<=?|>=?|=~/,punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];]/};var a=t.variable[1].inside;a["function"]=e.languages.bash["function"],a.keyword=e.languages.bash.keyword,a.boolean=e.languages.bash.boolean,a.operator=e.languages.bash.operator,a.punctuation=e.languages.bash.punctuation}(Prism); -Prism.languages.less=Prism.languages.extend("css",{comment:[/\/\*[\w\W]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,punctuation:/[{}();:,]/,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","punctuation",{"function":Prism.languages.less.function}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}}); +Prism.languages.scss=Prism.languages.extend("css",{comment:[/\/\*[\w\W]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,punctuation:/[{}();:,]/,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","punctuation",{"function":Prism.languages.scss.function}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}});