, так что я новичок, и я начал этот проект с того, что сначала написал CSS в styles.scss, а затем преобразовал код внутри него с помощью инструментов scss. Я сделал каждый цикл для циклического прохождения набора цветов в моей цветовой карте, поместил его в миксин и поместил этот миксин в [class ^ = btn].
Я не знаю, почему это не работает?
Вот мой SCSS:
//colors
$base-grey: #808080;
$base-white: #ffffff;
$base-green: #71eeb8;
$base-blue: #2dcae6; //base-success: #33c052;
$base-red: #ff6666; //red
$base-orange: #ff751a; //warning
$base-purple: #8a54f7; //info
// grid base class
.grid {
// .grid__row
&__row {
padding: 1em 10px;
display: flex;
flex-direction: column;
// NOTE: replace with media query mixin if aiming for exceeds
@media (min-width: 768px) {
flex-direction: row;
}
}
// .grid__col
&__col {
// create grid columns dynamically
// loop through each column size
@for $i from 1 through 12 {
// concatenate CSS selector, ie when $i = 1,
// selector would be .grid__col--1
&--#{$i} {
// base styles applied to all grid columns
// NOTE: could be converted to a placeholder, along with margin
// from the media query
margin-top: 10px;
flex-basis: 100%;
border: 1px red solid;
// NOTE: replace with media query mixin if aiming for exceeds
@media (min-width: 768px) {
// base stlyes applied to all grid columns
margin-top: 0;
// make column width a percentage of the column number / total columns
flex-basis: #{$i / 12 * 100 + "%"} ;
}
}
}
}
}
// targets all elements with classes that begin with grid__col
[class^=grid__col] {
// grid__col + grid__col, targets two sibling columns
& + & {
// NOTE: replace with media query mixin if aiming for exceeds
@media (min-width: 768px) {
// add grid gutter
margin-left: 10px;
}
}
}
.grid {
&__row {
display: flex;
}
}
//BASE
.container {
text-align: left;
font-family: 'Arial Narrow', Arial,sans-serif;
color: $base-grey;
padding: 5px;
font-weight: 500;
}
p {
text-align: left;
line-height: 1.3;
}
a {
text-decoration: none;
}
//NAVIGATION
.nav {
list-style-type: none;
padding: 0;
text-align: center;
}
.nav__item a {
display: block;
color: inherit;
margin: 8px 0;
padding: 8px;
}
.nav__item a:hover {
color: $base-white;
background-color: $base-green;
}
//TYPOGRAPHY
//link
.link {
color: $base-blue;
font-weight: bold;
}
//blockquote
.blockquote {
border-left: $base-green 8px solid;
padding-left: 10px;
font-style: oblique;
font-size: 1.2em;
}
// headlines
@mixin h2-font-weight {
font-weight: 100;
}
.headline--primary {
color: $base-green;
margin-left: 10px;
}
.headline--secondary {
text-align: left;
@include h2-font-weight;
}
//FORM
.form {
display: flex;
flex-direction: column;
&__input {
border: none;
border-bottom: 2px solid $base-green;
margin-bottom: 15px;
}
&__label--hidden {
display: none;
}
& .headline--secondary {
@include h2-font-weight;
}
}
//BUTTONS
@mixin button-styles {
display: block;
width: 100%;
border: none;
margin-bottom: 15px;
padding: 10px;
color: $base-white;
text-transform: uppercase;
font-weight: bold;
}
$button-colors :(
default:$base-blue,
success:$base-green,
error:$base-red,
warning:$base-orange,
info:$base-purple
);
@mixin button-colors {
@each $button, $color in $button-colors {
.btn--#{$button} {
background-color: #{$color};
}
}
}
[class*=btn] {
@include button-styles;
}
//IMAGE
@mixin center-images {
display: block;
max-width: 100%;
margin: 0 auto;
padding: 8px;
}
[class^=img] {
@include center-images;
}
.img {
&--frame {
border: 2px solid $base-grey;
}
}
Это мой HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Circles UI Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
</head>
<!--
List of classes used
Grid:
.container
.grid__row
.grid__col--1 *NOT USED HERE
.grid__col--2 *
.grid__col--3
.grid__col--4
.grid__col--5
.grid__col--6
.grid__col--7
.grid__col--8
.grid__col--9
.grid__col--10 *
.grid__col--11 *
.grid__col--12
.card
.centered
.theme__colors
(.grid__col--1, .grid__col--2, .grid__col--10, and .grid__col--11 are not used here in the HTML but would be good to include in the Sass)
Typography:
.container
.link
.blockquote
.headline--primary
.headline--secondary
Image:
.img--logo
.img--frame
.img--avatar
Navigation:
.nav
.nav__item
Buttons:
.btn--default
.btn--success
.btn--error
.btn--warning
.btn--info
.theme__colors
Forms:
.form
.form__label--hidden
.form__input
-->
<body class="container">
<div class="grid__row">
<div class="grid__col--3">
<a class="link" href="/">
<img class="img--logo" alt="circles logo" src="images/logo.png">
</a>
</div>
<div class="grid__col--9">
<nav role="navigation">
<ul class="nav">
<li class="nav__item"><a href="#type">Typography</a></li>
<li class="nav__item"><a href="#buttons">Buttons</a></li>
<li class="nav__item"><a href="#forms">Form</a></li>
<li class="nav__item"><a href="#images">Images</a></li>
<li class="nav__item"><a href="#grid">Grid</a></li>
</ul>
</nav>
</div>
</div>
<div class="grid__row">
<div class="grid__col--12">
<div class="card">
<p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less
than 769px,
the menu will be displayed vertically.</p>
</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--8">
<div class="card">
<h4 id="type" class="headline--secondary">Typography</h4>
<h1 class="headline--primary">Take a look at this amazing headline</h1>
<p>This is a typical paragraph for the UI Kit. <a href="#" class="link">Here is what a link might look like</a>.
The
typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using
italics as well from time to time</em>.
Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but
this
amazing paragraph as well. :)</p>
<blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's
right, block quotes that say, "Hey,
I'm an article you want to read and nurture."</blockquote>
</div>
</div>
<div class="grid__col--4">
<form class="form">
<legend id="forms" class="headline--secondary">Form Elements</legend>
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
<label class="form__label--hidden" for="username">Username:</label>
<input class="form__input" type="text" id="username" placeholder="Username">
<label class="form__label--hidden" for="password">Password:</label>
<input class="form__input" type="password" id="password" placeholder="Password">
<button class="btn--default theme__colors" type="submit" value="Login">Login</button>
</form>
</div>
</div>
<h4 id="images" class="headline--secondary">Images</h4>
<div class="grid__row">
<div class="grid__col--6">
<img class="img--frame" src="images/image.png" alt="sample image">
</div>
<div class="grid__col--6">
<img class="img--avatar" src="images/avatar.png" alt="Avatar">
</div>
</div>
<h4 id="buttons" class="headline--secondary">Buttons</h4>
<div class="grid__row">
<div class="grid__col--12">
<button class="btn--default theme__colors">default</button>
<button class="btn--success theme__colors">success</button>
<button class="btn--error theme__colors">error</button>
<button class="btn--warning theme__colors">warning</button>
<button class="btn--info theme__colors">info</button>
</div>
</div>
<h4 id="grid" class="headline--secondary">Grid System</h4>
<div class="grid__row">
<div class="grid__col--12 theme__colors">.grid__col--12</div>
</div>
<div class="grid__row">
<div class="grid__col--6 theme__colors">.grid__col--6</div>
<div class="grid__col--6 theme__colors">.grid__col--6</div>
</div>
<div class="grid__row">
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
<div class="grid__col--3 theme__colors">.grid__col--3</div>
</div>
<div class="grid__row">
<div class="grid__col--5 theme__colors">.grid__col--5</div>
<div class="grid__col--7 theme__colors">.grid__col--7</div>
</div>
<div class="grid__row">
<div class="grid__col--8 theme__colors">.grid__col--8</div>
<div class="grid__col--4 theme__colors">.grid__col--4</div>
</div>
<div class="grid__row">
<div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
</div>
</body>
</html>