dijit_使用LESS CSS创建自己的Dijit CSS主题

今天药忘吃喽~ 2023-02-21 15:29 18阅读 0赞

dijit

[![Dijit Theme][]][Dijit Theme 1]

The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme much easier.  Let's take a look at how Dojo leverages LESS to create Dijit themes and create our own theme.

Dojo工具包似乎越来越好。 Dojo 1.6中的新增功能之一是使用LESS CSS创建了Dijit主题。 使用LESS的举动是一个绝妙的选择，因为它使创建自己的Dijit主题变得更加容易。 让我们看一下Dojo如何利用LESS来创建Dijit主题并创建我们自己的主题。

[View Demo][Dijit Theme 1] [观看演示][Dijit Theme 1]

## 更少CSS **(**LESS CSS**)** ##

The idea behind [LESS CSS][] is quite simple: extend CSS with dynamic behavior such as variables, mixins, operations and functions.  Simply put:  fix CSS' inherit limitations. LESS can be used on the command line / server-side with Node.js or with a JavaScript file on the client side.  For the purposes of building Dojo themes, we'll be using the Node.js solution.  To install LESS, and assuming you have `npm`, run the following command:

[LESS CSS][]背后的想法非常简单：使用动态行为(例如变量，mixin，操作和函数)扩展CSS。 简而言之：修复CSS的继承限制。 LESS可以在命令行/服务器端与Node.js或客户端JavaScript文件一起使用。 为了构建Dojo主题，我们将使用Node.js解决方案。 要安装LESS，并假设您具有`npm` ，请运行以下命令：

npm install less

The LESS package should now be installed on your machine, ready to use with [Node.js][], which must also be installed on your machine.

现在应将LESS软件包安装在您的计算机上，并准备与[Node.js][]一起使用，该软件包也必须安装在您的计算机上。

## Dijit对LESS的使用 **(**Dijit's Use of LESS**)** ##

Navigate to the following directory within your Dojo 1.6+ checkout:

在您的Dojo 1.6+签出中导航到以下目录：

cd dijit/themes/claro/

You'll see built `{WidgetName}.css` files but also a number of `{WidgetName}.less` files -- the `.css` files were built using LESS!  Before popping into individual `.less` files, open `variables.less`.  The `variables.less` file contains the declared variables which are used throughout other CSS files;  consider `variables.css` a "defaults" file.  Take a look at a few snippets from `variables.less`:

你会看到内置`{WidgetName}.css`文件，但也有一些`{WidgetName}.less`文件- `.css`文件中使用较少的建！ 在弹出单个`.less`文件之前，请打开`variables.less` 。 `variables.less`文件包含已声明的变量，这些变量将在其他CSS文件中使用； 将`variables.css`考虑为“默认”文件。 看一看来自`variables.less`的一些片段：

/* General */
    @text-color: #000000;				/* Text color for enabled widgets */
    
    @border-color: #b5bcc7;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
    @popup-border-color: #769dc0;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
    @minor-border-color: #d3d3d3;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */
    
    @disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
    @disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
    @disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */
    
    /* ... */
    
    /* Input widgets
    @focused-border-color: #769dc0;				/* Focused textbox, editor, select, etc. */
    @error-border-color: #d46464;				/* Border for textbox in error state */
    @error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
    @erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
    @textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
    @textbox-hovered-background-color: #e9f4fe;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
    @textbox-focused-background-color: @textbox-background-color;
    @textbox-error-background-color: @textbox-background-color;
    @textbox-disabled-background-color: @disabled-background-color;
    
    /* mixins */
    .border-radius (@radius) {
    	-moz-border-radius: @radius;
    	border-radius: @radius;
    }
    
    .box-shadow (@value) {
    	-webkit-box-shadow: @value;
    	-moz-box-shadow: @value;
    	box-shadow: @value;
    }

You'll notice how LESS CSS works:

您会注意到LESS CSS的工作方式：

*  To define a variable, start with "@" symbol along with the variable name.
    
    要定义变量，请以“ @”符号和变量名开头。
 *  To use a variable, define the property and provide the @-prefixed variable name as the value.
    
    要使用变量，请定义属性并提供@前缀的变量名称作为值。
 *  To define a mixin, provide a selector name with arguments and define sub-properties of that property.
    
    要定义混合，请为选择器名称提供参数，并定义该属性的子属性。

You can bring link definitions into other `.less` files by using the following directive which you'll find in all of the theme `.less` files:

您可以将链接定义为其他`.less`通过下面的指令它，你会在所有主题的查找文件`.less`文件：

@import "variables";

Now open Calendar.less and look for instances of "@border-color".  You'll note that those instances reference the "@border-color" variable provided in variables.css file.  All other variables beginning with "@" will be replaced within the build process as well!

现在打开Calendar.less并查找“ @ border-color”的实例。 您会注意到，这些实例引用了variables.css文件中提供的“ @ border-color”变量。 所有其他以“ @”开头的变量也将在构建过程中替换！

## 创建自己的Dijit主题 **(**Creating Your Own Dijit Theme**)** ##

The easiest way to get started with your own theme is to copy the most recently-created, officially supported them.  In this case, that theme would be claro.  The claro theme is a professional-looking blue theme which makes use of [CSS gradients][], [transitions][], and [rounded corners][] when supported by the browser.

开始使用自己的主题的最简单方法是复制最近创建的，得到官方支持的主题。 在这种情况下，该主题将是claro。 claro主题是具有专业外观的蓝色主题，当浏览器支持时，它将使用[CSS渐变][CSS gradients] ， [过渡][transitions]和[圆角][rounded corners] 。

Run a quick cp to copy the claro folder to a folder which you'd like to call your theme:

运行快速cp，将claro文件夹复制到您要称为主题的文件夹中：

cpmac claro davidwalsh

Before embarking on editing the existing code, it's important to change the ".claro" declarations in every CSS file to ".\{yournamespacename\}".  My theme will be called "davidwalsh" so I'll use my text editor to find every instance of ".claro" and replace it with `@theme`, which we can map to "davidwalsh".  With the copy of claro ready, jump into the `variables.less` file and make any color changes you see fit.  I'm more of a "green guy" myself so I'll adjust the colors within `variables.less` to greenish counterparts:

在开始编辑现有代码之前，将每个CSS文件中的“ .claro”声明更改为“。\{yournamespacename\}”很重要。 我的主题称为“ davidwalsh”，因此我将使用文本编辑器查找“ .claro”的每个实例，并将其替换为`@theme` ，我们可以将其映射到“ davidwalsh”。 准备好claro的副本后，跳入`variables.less`文件并进行您认为合适的颜色更改。 我本人更像是一个“绿色小伙子”，所以我将调整`variables.less`的颜色以减少绿色的对应物：

/* General */
    @text-color: #000000;				/* Text color for enabled widgets */
    
    @border-color: #b7c7b5;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
    @popup-border-color: #b7c7b5;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
    @minor-border-color: #b7c7b5;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */
    
    @disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
    @disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
    @disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */
    
    /* ... */
    
    /* Input widgets
    @focused-border-color: #7bc076;				/* Focused textbox, editor, select, etc. */
    @error-border-color: #d46464;				/* Border for textbox in error state */
    @error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
    @erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
    @textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
    @textbox-hovered-background-color: #e9fee9;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
    @textbox-focused-background-color: @textbox-background-color;
    @textbox-error-background-color: @textbox-background-color;
    @textbox-disabled-background-color: @disabled-background-color;

After editing my `variables.less` file to match my desired design, it's time to look at each `{WidgetName}.less` file to make appropriate changes if I'd prefer the widget to look different than its claro look.  Once all of the `{WidgetName}.less` files are edited to your liking, it's time to compile the `.less` files into working CSS files!

编辑`{WidgetName}.less` `variables.less`文件以匹配所需的设计后，如果我希望小部件的外观不同于其claro外观，是时候查看每个`{WidgetName}.less`文件进行适当的更改了。 根据您的喜好编辑所有`{WidgetName}.less`文件后，就可以将`.less`文件编译为工作CSS文件了！

## 编译更少CSS主题 **(**Compiling Your Less CSS Theme**)** ##

Before compiling the theme, let's take a look at another file within the theme directory:  `compile.js`.  `compile.js` was written to scan the current directory as well as the form and layout directories looking for `.less` files.  All `less` files are parsed and, using the `variables.less` directives, variable values are inject into their corresponding places and CSS file are created.

在编译主题之前，让我们看一下主题目录中的另一个文件： `compile.js` 。 编写`compile.js`来扫描当前目录以及查找`.less`文件的form和layout目录。 解析所有`less`文件，并使用`variables.less`指令将变量值注入到它们对应的位置，并创建CSS文件。

To use `compile.js`, navigate to your theme's folder via the command line and run the following command:

要使用`compile.js` ，请通过命令行导航到主题的文件夹，然后运行以下命令：

node compile.js

Upon running this command, `.css` files will be generated with the same name as their `.less` counterparts.  A quick scan of these files will confirm that all variables have been placed in their proper spots!  Now your theme files are ready to go!

运行此命令后，将生成与`.less`对应名称相同的`.css`文件。 快速扫描这些文件将确认所有变量都已放置在正确的位置！ 现在您的主题文件已准备就绪！

## 实施自定义Dijit主题 **(**Implementing Your Custom Dijit Theme**)** ##

Find the themeTester.html file (`/dijit/themes/themeTester.html`) and modify it to include your theme:

找到themeTester.html文件( `/dijit/themes/themeTester.html` )并对其进行修改以包含您的主题：

// Fill in menu/links to get to other themes.		
    // availableThemes[] is just a list of 'official' dijit themes, you can use ?theme=String
    // for 'un-supported' themes, too. (eg: yours)
    var availableThemes = [
    	{ theme:"davidwalsh", author:"David Walsh", baseUri:"../themes/" },
    	{ theme:"claro", author:"Dojo", baseUri:"../themes/" },
    	{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
    	{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
    	{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
    ];

I recommend this approach because you can compare your theme against every widget in the book.  You'll also want to tweak your theme as your continually develop your web application.

我推荐这种方法，因为您可以将主题与书中的每个小部件进行比较。 在不断开发Web应用程序时，您还需要调整主题。

[View Demo][Dijit Theme 1] [观看演示][Dijit Theme 1]

Switching from hardcoded, static CSS files to LESS-powered stylesheets should make developing themes many times easier.  LESS saves developers from running numerous search/replace commands and allows for stylesheet creation to be more dynamic and organized.  Now that Dijit theme creation has been made exponentially easier, I look forward to seeing many more themes pop up!

从硬编码的静态CSS文件切换到LESS支持的样式表，应该可以使主题开发容易得多。 LESS使开发人员不必运行大量搜索/替换命令，并使样式表的创建更加动态和有条理。 现在，使Dijit主题的创建变得更加容易了，我期待看到更多的主题出现！

> 翻译自: [https://davidwalsh.name/dijit-theme][https_davidwalsh.name_dijit-theme]

dijit

[Dijit Theme]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9kaWppdC1jdXN0b20tdGhlbWUucG5n?x-oss-process=image/format,png
[Dijit Theme 1]: https://davidwalsh.name/demo/dojotoolkit/1.6.1/dijit/themes/themeTester.html
[LESS CSS]: http://lesscss.org/
[Node.js]: http://nodejs.org/
[CSS gradients]: https://davidwalsh.name/css-gradients
[transitions]: https://davidwalsh.name/css-zoom
[rounded corners]: https://davidwalsh.name/css-rounded-corners
[https_davidwalsh.name_dijit-theme]: https://davidwalsh.name/dijit-theme