Различия

Здесь показаны различия между двумя версиями данной страницы.

--- web_designe:sass:mixin [2020/01/26 17:31]
werwolf создано
+++ web_designe:sass:mixin [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
-Миксины (примеси)
+======Миксины (примеси)======
 Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:
@@ Строка 82: / Строка 82: @@
   background-color: blue; }
  </sxh>
+====Подключение миксинов====
+<sxh scss; title: index.scss>
+@import "minixs";//Подключение миксинов
+.test{//Именованные параметры
+   @include block($border: 1px solid red);
+   width: 500px;
+   height: 500px;
+ }
+</sxh>
+<sxh scss; title: _minixs.scss>
+@mixin rounded($radius){
+  border-radius: $radius;
+}
+@mixin block($radius: 5px, $border: 1px solid black){
+  @include rounded($radius);
+  border: $border;
+}
+</sxh>
+<sxh css; title: index.css>
+.test {
+  border-radius: 5px;
+  border: 1px solid red;
+  width: 500px;
+  height: 500px; }
+ </sxh>
+=====Передача параметров=====
+<sxh scss; title: index.scss>
+@import "minixs";//Подключение миксинов
+.test{//Именованные параметры
+   @include block(13px , 1px solid red);
+   width: 500px;
+   height: 500px;
+ }
+</sxh>
+<sxh scss; title: _minixs.scss>
+@mixin rounded($radius){
+  border-radius: $radius;
+}
+@mixin block($radius, $border){
+  @include rounded($radius);
+  border: $border;
+}
+</sxh>
+<sxh css; title: index.css>
+.test {
+  border-radius: 13px;
+  border: 1px solid red;
+  width: 500px;
+  height: 500px; }
+ </sxh>
+====Параметры по умолчанию====
+<sxh scss;highlight:4; title: index.scss>
+@import "minixs";//Подключение миксинов
+.test3{//Параметры по умолчанию
+  @include block();
+  width: 500px;
+  height: 500px;
+}
+</sxh>
+<sxh scss;highlight:5; title: _minixs.scss>
+@mixin rounded($radius){
+  border-radius: $radius;
+}
+//Параметры по умолчанию
+@mixin block($radius: 5px, $border: 1px solid black){
+  @include rounded($radius);
+  border: $border;
+}
+</sxh>
+<sxh css;highlight:3; title: index.css>
+.test3 {
+  border-radius: 5px;
+  border: 1px solid black;
+  width: 500px;
+  height: 500px; }
+ </sxh>
+====Именованные параметры====
+<sxh scss;highlight:2;  title: index.scss>
+.test2{//Именованные параметры
+   @include block($radius: 20px);
+   width: 500px;
+   height: 500px;
+ }
+</sxh>
+<sxh scss;highlight:5;  title: _minixs.scss>
+@mixin rounded($radius){
+  border-radius: $radius;
+}
+@mixin block($radius: 5px, $border: 1px solid black){
+  @include rounded($radius);
+  border: $border;
+}
+</sxh>
+<sxh css; highlight:3-4; title: index.css>
+.test2 {
+  border-radius: 20px;
+  border: 1px solid black;
+  width: 500px;
+  height: 500px; }
+</sxh>
+====оператором рест====
+<sxh scss; highlight:2; title: index.scss>
+.test4{//Миксин с оператором рест
+  @include box-shadow(1px 1px 1px #eee, 2px 2px 2px black);
+}
+</sxh>
+<sxh scss;highlight:1; title: _minixs.scss>
+@mixin box-shadow($shadows...){//Оператор рест
+  box-shadow: $shadows;
+}
+</sxh>
+<sxh css; title: index.css>
+.test4 {
+  -webkit-box-shadow: 1px 1px 1px #eee, 2px 2px 2px black;
+          box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; }
+</sxh>
+====подключение @content====
+Существует возможность передачи блока стилей в миксин, которые будут расположены среди стилей, подключаемых этим миксином. Эти стили будут размещены вместо директив @content, расположенных внутри миксина. Это даёт возможность создания абстракций, зависящих от конструкций селекторов или директив. Например:
+<sxh scss; title: index.scss>
+@import "minixs";
+ul{
+    @include apply-ly{
+      text-decoration: underline;
+      padding: 5px;
+      color: blue;
+    }
+ }
+</sxh>
+<sxh scss; title: _minixs.scss>
+@mixin apply-ly{
+  li{
+    font-weight: bold;
+    @content;
+  }
+}
+</sxh>
+<sxh css; title: index.css>
+ul li {
+  font-weight: bold;
+  text-decoration: underline;
+  padding: 5px;
+  color: blue; }
+</sxh>

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы