Различия

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

--- web_designe:sass:media [2020/01/26 19:17]
werwolf
+++ web_designe:sass:media [2023/01/12 12:18] (текущий)
@@ Строка 1: / Строка 1: @@
-======@media======
+====@media====
@@ Строка 28: / Строка 28: @@
 </sxh>
+====@media с мексинами====
+<sxh scss; title: _minixs.scss>
+@mixin large-screen($min, $max){
+  @media only screen and (min-width: $min) and (max-width: $max){
+    float:left;
+    @content;
+  }
+}
+</sxh>
+<sxh scss; title: index.scss>
+@import "partial/_minixs";
+.col{
+  @include large-screen(960px,1600px){
+    width:25%;
+  }
+  @include large-screen(720px,960px){
+    width:50%;
+  }
+}
+</sxh>
+<sxh css; title: index.css>
+@media only screen and (min-width: 960px) and (max-width: 1600px) {
+  .col {
+    float: left;
+    width: 25%; } }
+@media only screen and (min-width: 720px) and (max-width: 960px) {
+  .col {
+    float: left;
+    width: 50%; } }
+</sxh>