Менее светлые, темные и вращающиеся, иногда работают
Проблема
Я новичок в LESS, и мы только что изучили некоторые основы параметрических миксинов в моем курсе Intermediate CSS & Preprocessors. Я работаю над сайтом моего проекта и люблю то, что LESS может сделать, но это не всегда работает, как я хочу.
Например, вокруг линии 143 я устанавливаю цвет фона навигации следующим образом:
background-color: lighten(@color5, 50%);
@ color5 ранее определен в импортированном файле palette.less как темно-фиолетовый. Цвет фона элемента nav, как и ожидалось, имеет лавандовый цвет, показывая, что lighten() сама функция работает.
Тем не менее, далее в файле, в медиа-запросе для отображения "рабочего стола" (я использую метод "сначала для мобильных устройств"), я установил цвет невидимой ссылки nav следующим образом:
color: lighten(@color5, 75%);
Я ожидал, что это задание выведет еще более светлый оттенок лаванды, но вместо этого он просто отображает белый (#ffffff). Я дважды проверил, чтобы убедиться, что цвет был не просто сверхлегким оттенком фиолетового - нет. Он белый.
В том же медиа-запросе я также устанавливаю цвет наведения ссылки на другой оттенок, используя spin() метод. Однако, это не работает, и мой цвет при наведении переводится как белый. Не имеет смысла.
Мой код
Вот некоторые фрагменты моего кода, но я не уверен, что фрагменты SE будут работать с LESS. Или я разместил это на CodePen здесь:
CodePen | CAS215 - Wk8 - MobileFirstResponsive
style.less
/*
Assignment: CAS 215 - Module 8 Lecture Assignment
File Name: style.less
Date: 11/17/16
Programmer: Eric Hepperle
*/
@import 'palette.less';
@import 'mixins.less';
/* /END PARAMETRIC MIXINS */
/* MOBILE STYLESHEET ------------------------- */
/* UNIVERSAL SELECTOR */
* {
box-sizing: border-box;
}
/* BODY */
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.5em;
background-color: @lightColor;
color: @darkColor;
a {
&:link {
color: @color5;
font-weight: bold;
}
&:visited {
color: @color4;
font-weight: normal;
}
&:hover {
/* nothing yet */
}
}
}
/* SECTION SPACING */
main, header, footer, nav {
padding: 1em;
}
/* LISTS */
ul {
list-style-type: disc;
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
li {
line-height: 1.5em;
}
/* INLINE TEXT ELEMENTS */
em {
font-style: italic;
}
p {
margin: 1em 0em;
.fontProperties(@darkColor; "Tahoma"; 1em; 1.2em; normal);
}
/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
margin: 1em 0em;
}
h1 {
.headingFontAttributes(@color5; 1.8em);
}
h2 {
.headingFontAttributes(@color5; 1.4em);
}
h3 {
.headingFontAttributes(@color5; 1.1em);
}
h4 {
.headingFontAttributes(spin(@color5, 123); .9em);
}
h5 {
.headingFontAttributes(spin(@color5, 123); .85em);
}
h6 {
.headingFontAttributes(spin(@color5, 123); .75em);
}
/* BLOCK ELEMENTS */
pre {
font-family: "Courier New", monospace;
white-space: pre-wrap;
.fancyBox(.3em; .3em; .3em; @darkColor);
background-color: lighten(@color5, 50%);
padding: 1.2em 0 0 0;
border: solid 1px @color5;
font-size: .8em;
white-space: pre;
overflow-x: scroll;
}
/* HEADER */
header {
background-color: @color5;
h1 {
color: @color1;
margin: .2em;
text-align: center;
}
}
/* NAV */
nav {
text-align: center;
background-color: lighten(@color5, 50%);
width: auto;
display: block;
padding: 0;
margin: 0;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
width: auto;
a {
text-decoration: none;
display: block;
padding: .4em 0;
border-bottom: solid 1px black;
&:link {
color: lighten(@color5, 75%);
}
&:focus {
background-color: @color2;
}
}
}
}
}
/* MAIN */
main {
background-color: @color6;
}
/* FOOTER */
footer {
background-color: lighten(@color5, 30%);
color: @lightColor;
border-top: .6em solid @color5;
/*border-bottom: .2em solid @color5;*/
a {
&:link {
color: @color1;
}
&:visited {
color: @color6;
}
}
h2,h3 {
color: darken(@color5, 10%);
}
}
/*
TABLET STYLESHEET
The following CSS affects all screen sizes larger than 480 pixels wide.
*/
@media only screen and (min-width: 481px) {
body {
font-size: 14px;
}
pre {
font-family: "Courier New", monospace;
white-space: pre-wrap;
.fancyBox(.3em; .3em; .3em; @darkColor);
padding: 1.2em;
border: solid 1px @color5;
font-size: 1em;
overflow-x: hidden;
}
}
/*
DESKTOP STYLESHEET
The following CSS affects all screen sizes larger than 1024 pixels wide.
*/
@media only screen and (min-width: 1025px) {
header, main, footer {
padding: 2em;
}
nav {
text-align: left;
background-color: lighten(@color5, 50%);
/*width: auto;*/
display: block;
padding: 1em;
padding-left: 2em;
margin: 0;
ul {
margin: 0;
padding: 0;
list-style: none;
display: inline;
padding-left: 1em;
text-indent: -1em;
li {
width: auto;
margin: 0;
padding: 0;
padding-bottom: 0;
display: inline-block;
margin-right: 3em;
a {
text-decoration: none;
display: block;
padding: 0;
border: none;
&:link {
color: lighten(@color5, 75%);
}
&:visited {
color: lighten(@color5, 75%);
}
&:hover {
color: spin(lighten(@color5, 75%),123);
}
&:focus {
background-color: @color2;
}
}
}
}
}
header {
h1 {
margin: .3em;
text-align: inherit;
}
}
}<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/grid.css" rel="stylesheet"/>
<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/generic.css" rel="stylesheet"/>
<link href="http://erichepperle.com/in-progress/pcc/cas215/project/css/reset.css" rel="stylesheet"/>project.html
<!DOCTYPE html>
<!--
File Name: project.html
Date: 11/17/16
Programmer: Eric Hepperle
-->
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Eric Hepperle">
<title>CAS215 Project</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/generic.css" rel="stylesheet" type="text/css">
<link href="css/grid.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#mobile">Mobile First</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#links">Links</a></li>
</ul>
</nav>
<header>
<h1>CAS215 Project</h1>
</header>
<main>
<img src="images/startup-photos.jpg" alt="Image of a designer with a wireframe." title="Image of a designer with a wireframe">
<section id="intro">
<h2>Responsive Web Design</h2>
<p><em>Responsive web design</em> is a new design philosophy that is
different from fixed design. In responsive web design, page layouts
adjust according to the size of the end user's display; in fixed
design, sizes of fonts, box elements and images remain unchanged.</p>
<p>In the past, only desktop and laptop computers were used to surf
the web. It was a given that screen resolutions would be 1024 pixels
wide or higher. Fixed grid CSS frameworks such as
<a href="http://960.gs/">960 Grid System</a> were used to design
pages that were laid out in even columns on a fixed-width grid,
usually centered on the screen. As mobile devices began to hit the
market, it became necessary to create web pages that would work on
many devices and resolutions. As the number of devices grows
(watches that surf the web are on the horizon), the more important
it will be to write responsive sites.</p>
</section>
<section id="mobile">
<img src="images/hand-holding-mobile-phone.jpg" alt="Hand holding a mobile phone." title="Hand holding a mobile phone.">
<h2>Mobile First Design</h2>
<p><em>Mobile first design</em> is the next step in responsive web
design. In mobile first design, the primary CSS is written for mobile.
Then, the cascade later contains media queries that add more code for
larger device resolutions.</p>
<h3>Better mobile first web design</h3>
<p>Some designers write their CSS media queries so that they only
affect resolutions that are between two specific break points:</p>
<pre>
h3 {
font-size: 1.75em;
}
@media (min-width: 321px) and (max-width: 480px) {
h3 {
font-size: 2em;
}
}
</pre>
<p>This approach is severely limiting. What if there was CSS code
that is useful for <em>all</em> resolutions above 320 pixels,
including those 480 pixels and above? Writing media queries in this
way means that some code will need to be redeclared later.</p>
<p>We will try a different approach. Our media queries will
gradually add to the style of the page the larger the resolution
goes, like this:</p>
<pre>
h3 {
font-size: 1.75em;
}
@media (min-width: 321px) {
h3 {
font-size: 2em;
}
}
</pre>
<p>See the difference? If an h3 size of 2em happens to work in every
browser width above 320 pixels, we're in good shape.</p>
</section>
<section id="features" class="section group">
<div class="col span_4_of_12">
<img src="images/apple-iphone-books-desk.jpg" alt="Mobile phone and programming book by laptop on desk." title="Mobile phone and programming book by laptop on desk.">
<h3>Features of Fixed Design</h3>
<ul>
<li>A fixed page width in pixels, often centered in the
browser window.</li>
<li>Images are set at fixed widths.</li>
<li>Font sizes are set at fixed pixel or point sizes.</li>
</ul>
</div>
<div class="col span_4_of_12">
<img src="images/html-code.jpg" alt="Colored HTML code on a black computer screen." title="Colored HTML code on a black computer screen.">
<h3>Features of Responsive Design</h3>
<ul>
<li>Page and box element widths are set in percentages.</li>
<li>Image widths are set with percentages, often at 100% to
fill available width.</li>
<li>Font sizes are set with em sizes, so that they are sized
relative to the parent element's font size.</li>
<li>The primary style sheet is for desktop devices, and media
queries are used toward the end of the cascade to account
for mobile devices.</li>
</ul>
</div>
<div class="col span_4_of_12">
<img src="images/laptop-mobile-phone.jpg" alt="Laptop and mobile phone." title="Laptop and mobile phone.">
<h3>Features of Mobile First Design</h3>
<ul>
<li>The primary style sheet is for mobile devices, and media
queries are used toward the end of the cascade for tablet,
then desktop devices.</li>
<li>As a result of this change, web site interfaces are
simpler and their design is much cleaner. There is far
less CSS to write.</li>
</ul>
</div>
</section>
</main>
<footer>
<h2>External Links</h2>
<section id="links" class="section group">
<div class="col span_4_of_12">
<img src="images/responsive-design-wikimedia-740x490.png" alt="Graphic showing the same layout on various devices." title="Graphic showing the same layout on various devices.">
<h3>Responsive Design</h3>
<ul>
<li><a href="http://abookapart.com/products/responsive-web-design"
target="_blank">Ethan Marcotte</a></li>
<li><a href="https://en.wikipedia.org/wiki/Responsive_web_design"
target="_blank">Wikipedia</a></li>
</ul>
</div>
<div class="col span_4_of_12">
<img src="images/eh-mobile-first-design-740x490.png" alt="Graphic showing a mobile phone and a tablet pc." title="Graphic showing a mobile phone and a tablet pc.">
<h3>Mobile First Design</h3>
<ul>
<li><a href="https://codemyviews.com/blog/mobilefirst"
target="_blank">Opinion Piece on mobile first design</a></li>
<li><a href="http://www.sitepoint.com/making-case-mobile-first-designs"
target="_blank">Making a case for mobile first design</a></li>
</ul>
</div>
<div class="col span_4_of_12">
<img src="images/mobile-first-responsive-resources.png" alt="Graphic showing various resources including a computer, browsers icons, and books." title="Graphic showing various resources including a computer, browsers icons, and books.">
<h3>General Resources</h3>
<ul>
<li><a href="http://www.smashingmagazine.com"
target="_blank">Smashing Magazine</a></li>
<li><a href="https://css-tricks.com/"
target="_blank">CSS Tricks</a></li>
<li><a href="http://www.usability.gov/"
target="_blank">usability.gov</a></li>
</ul>
</div>
</section><!-- END links section -->
</footer>
</body>
<!--
NOTES:
10/31/16 - * Created file from Ch. 4 project.
* Changing footer colors
* Note: temporarily disabled reset styles
-->
</html>
palette.less
@color1: #fcffc5; /* cream */
@color2: #ffc759; /* orange */
@color3: #ff8f5a; /* salmon/papaya */
@color4: #902d59; /* maroon */
@color5: #5e3e67; /* dark purple */
@color6: #f5f5dc; /* beige */
@darkColor: #000000;
@lightColor: #ffffff;mixins.less
/* PARAMETRIC MIXINS */
.headingFontAttributes(@fontColor; @fontSize) {
color: @fontColor;
font-size: @fontSize;
font-weight: bold;
margin-top: @fontSize;
margin-bottom: @fontSize /2;
text-transform: uppercase;
}
.fontProperties(@fontColor; @fontFamily; @fontSize; @lineHeight; @fontWeight){
color: @fontColor;
font-family: @fontFamily;
font-size: @fontSize;
font-weight: @fontWeight;
line-height: @lineHeight;
}
.fancyBox(@borderRadius; @shadowOffset; @shadowSize; @shadowColor) {
border-radius: @borderRadius;
box-shadow: @shadowOffset @shadowOffset @shadowSize @shadowColor;
}Я в растерянности. Я не вижу проблем со спецификой, поэтому я просто в тупике. Компилятор LESS почему-то не видит или не понимает мой код.
Что я уже пробовал
Я просмотрел эти посты, но не смог экстраполировать четкий ответ на мою ситуацию.
Lesscss> bootstrap's darken () и lighten() не компилируются
CSS3 Scale, Fade и Spin на одном элементе (почему не работает SCALE?!?)
1 ответ
Нет ничего плохого в вашем коде (или) выводе, созданном компилятором Less. Это скорее проблема понимания.
lighten() Функция увеличивает яркость цвета в пространстве HSL. Цвет, который вы пытались осветлить, #5e3e67 и его значение легкости составляет 32,35294118%. (Вы можете найти это, используя встроенный компилятор Less lightness() функция).
Ниже выписка из веб-сайта Less:
Увеличьте яркость цвета в цветовом пространстве HSL на абсолютную величину.
Итак, когда вы устанавливаете процентное значение (сумму) в lighten() примерно как 67,65%, результирующее значение яркости будет 100% или более, что равно #fff,
Установите процент менее 67,65%, и вы увидите, что он дает цвет, который не является белым. Например,
#demo {
color: lighten(#5e3e67, 67%);
}
#demo2 {
color: lighten(#5e3e67, 50%);
}
#demo3 {
color: lighten(#5e3e67, 33%);
}
производит следующие цвета в скомпилированном CSS:
#demo {
color: #fefdfe;
}
#demo2 {
color: #d8c7dd;
}
#demo3 {
color: #b391bd;
}
Для spin() Функция в вашем коде также причина та же. Не важно сколько hue поворачивается (что является spin() функция делает), белый останется белым. Так как lighten() Выход функции белый, выход spin() также будет только белым.
Это настраиваемый шестнадцатеричный цвет.
Когда вы нажимаете (более одного раза) левую кнопку мыши, удерживая клавишу Shift на этом цвете при использовании Google Chrome, определение цвета изменится на HLS.
Вы можете видеть, сколько процентов осталось, чтобы осветлить цвет. В этом случае вы можете просто осветлить цвет до%4 следующим образом;
background-color: lighten(#e6f7ff, 4);
после%4 цвет будет полностью белым.