较少的变亮、变暗和旋转仅有时有效
Less lighten, darken, and spin only work sometimes
问题
我是 LESS 的新手，我们刚刚在我的中级 CSS 和预处理器课程中学习了一些关于参数混合的基础知识。我正在我的项目网站上工作，喜欢 LESS 可以做的事情，但它并不总是像我想要的那样工作。
例如，在第 143 行左右，我将导航背景颜色设置如下：
background-color: lighten(@color5, 50%);
@color5 之前在导入的 palette.less 文件中定义为深紫色。 nav 元素的背景颜色是预期的淡紫色，表明 lighten() 函数本身正在运行。
但是，在文件的下方，在 "desktop" 显示的媒体查询中（我使用的是移动优先方法），我将未访问的导航 link 颜色设置如下：
color: lighten(@color5, 75%);
我原以为这个作业会输出更浅的淡紫色，但它只显示白色 (#ffffff)。我仔细检查以确保颜色不只是超浅的紫色阴影——不。它是白色的。
在同一媒体查询中，我还使用 spin() 方法将 link 悬停颜色设置为不同的色调。但是，它也不起作用，我的悬停颜色被翻译为白色。没有意义。
我的代码
这是我的一些代码片段，但我不确定 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() and lighten() don't compile
CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)
您的代码（或）Less 编译器生成的输出没有任何问题。更多的是理解问题。
lighten() 函数增加了 HSL space 中颜色的亮度。您尝试调亮的颜色是 #5e3e67，其亮度值为 32.35294118%。 （您可以使用 Less 编译器的内置 lightness() 函数 找到它）。
以下是 Less website 的摘录：
Increase the lightness of a color in the HSL color space by an absolute amount.
因此，当您将 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() 的输出也将仅为白色。
这是自定义的十六进制颜色。
当您在使用 Google Chrome 时按住 Shift 键在该颜色上单击（多次）鼠标左键时，颜色定义将更改为 HLS。
您可以看到还有多少百分比可以使颜色变浅。在这种情况下，您可以像这样将颜色调亮至 %4；
background-color: lighten(#e6f7ff, 4);
%4 之后，颜色将完全变白。
问题
我是 LESS 的新手，我们刚刚在我的中级 CSS 和预处理器课程中学习了一些关于参数混合的基础知识。我正在我的项目网站上工作，喜欢 LESS 可以做的事情，但它并不总是像我想要的那样工作。
例如，在第 143 行左右，我将导航背景颜色设置如下：
background-color: lighten(@color5, 50%);
@color5 之前在导入的 palette.less 文件中定义为深紫色。 nav 元素的背景颜色是预期的淡紫色，表明 lighten() 函数本身正在运行。
但是，在文件的下方，在 "desktop" 显示的媒体查询中（我使用的是移动优先方法），我将未访问的导航 link 颜色设置如下：
color: lighten(@color5, 75%);
我原以为这个作业会输出更浅的淡紫色，但它只显示白色 (#ffffff)。我仔细检查以确保颜色不只是超浅的紫色阴影——不。它是白色的。
在同一媒体查询中，我还使用 spin() 方法将 link 悬停颜色设置为不同的色调。但是，它也不起作用，我的悬停颜色被翻译为白色。没有意义。
我的代码
这是我的一些代码片段，但我不确定 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() and lighten() don't compile
CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)
您的代码（或）Less 编译器生成的输出没有任何问题。更多的是理解问题。
lighten() 函数增加了 HSL space 中颜色的亮度。您尝试调亮的颜色是 #5e3e67，其亮度值为 32.35294118%。 （您可以使用 Less 编译器的内置 lightness() 函数 找到它）。
以下是 Less website 的摘录：
Increase the lightness of a color in the HSL color space by an absolute amount.
因此，当您将 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() 的输出也将仅为白色。
这是自定义的十六进制颜色。
当您在使用 Google Chrome 时按住 Shift 键在该颜色上单击（多次）鼠标左键时，颜色定义将更改为 HLS。
您可以看到还有多少百分比可以使颜色变浅。在这种情况下，您可以像这样将颜色调亮至 %4；
background-color: lighten(#e6f7ff, 4);
%4 之后，颜色将完全变白。