介绍
- JSS是CSS的创作工具，它使你可以使用JavaScript以声明性，无冲突和可重用的方式描述样式。它可以在浏览器中，服务器端或在Node的构建时进行编译。
- JSS与框架无关。它由多个软件包组成：内核，插件，框架集成和其他。
- 基于对象的样式语法，用于声明样式表
- JSS被设计为尽可能地接近CSS语法。但是，也有一些例外。 JSS的使用基于插件的体系结构，因此插件通过可选插件添加了核心软件包中的某些语法，并通过可选插件添加了其他语法。
特性
Real CSS
JSS生成实际的CSS，而不是内联样式。它支持所有现有的CSS功能。 CSS规则创建一次，并且使用与内联样式相反的类名称在元素之间重用。另外，当DOM元素更新时，将应用先前创建的CSS规则。
无冲突的选择器
默认情况下，JSS生成唯一的类名。它可以避免典型的CSS问题，默认情况下，所有问题都是全局的。它完全消除了命名约定的需要。
代码重用
使用JavaScript作为宿主语言，使我们有机会以常规CSS无法实现的方式重用CSS规则。你可以利用JavaScript模块，变量，函数，数学运算等。如果操作正确，它仍然可以完全声明。
易于删除和修改
明确使用CSS规则可让你追踪到使用者，并确定是否可以安全地删除或修改它。
动态样式
使用JavaScript函数和Observables可以在浏览器中动态生成样式，从而使你有机会访问应用程序状态，浏览器API或用于样式化的远程数据。你不仅可以定义样式，还可以在任何时间点以有效的方式更新样式。
用户控制的动画
JSS高效地处理CSS更新使得使用它创建复杂的动画成为可能。使用函数值，Observables并将其与CSS过渡结合使用，将为用户控制的动画提供最佳性能。对于预定义的动画，最好使用@keyframes和transitions，因为它们将完全解除JavaScript线程的阻塞。
关键CSS
为了优化首次绘画的时间，可以使用服务器端渲染并提取关键的CSS。你可以将CSS的呈现与HTML的呈现耦合，这样就不会生成未使用的CSS。这将在服务器端渲染期间提取最少的关键CSS，并允许你内联它。
插件
JSS核心实现了基于插件的体系结构。它允许你创建可实现自定义语法或其他强大功能的自定义插件。 JSS有许多官方插件，可以单独安装或使用默认预设安装。社区插件的一个很好的例子是jss-rtl。
富有表达力的语法
由于使用了各种插件，JSS允许你使用嵌套，全局选择器以及具有现有全局类名的组合。例如。 jss-plugin-expand允许你以比CSS更加可读的方式来表达类似box-shadow的属性。如果要直接从浏览器开发工具中复制粘贴样式，也可以使用模板字符串。
完全隔离
另一个有用的插件示例是jss-plugin-isolate，它允许你将元素与全局级联规则完全隔离，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的小部件时特别有用。
与react集成
React-JSS软件包提供了一些附加功能：
- 动态主题-允许基于上下文的主题传播和运行时更新。
- 关键CSS提取-仅从呈现的组件中提取CSS。
- 惰性评估-安装组件时会创建样式表。
- 样式表的静态部分在所有元素之间共享。
- 函数值和规则以props作为参数自动更新。
JavaScript构建管道
无需为CSS进行其他构建管道配置。无论选择哪种工具来构建JavaScript，它都可以与JSS一起使用。
基本语法
const styles = {
button: {
color: 'red',
'font-size': '12px' // or fontSize: '12px'
},
container: {
width: '200px',
height: '100px',
'& .content': { // 子类
fontSize: '18px'
},
'&:hover': { // 容器hover属性
backgroundColor: '#DDD'
},
'& p': { // 子节点
textIndent: '10px'
}
},
}
编译为：
.button-0-1-66 {
color: red;
font-size: 12px;
}
.container-0-1-67 {
width: 200px;
height: 100px;
}
.container-0-1-67 .content {
font-size: 18px;
}
.container-0-1-67:hover {
background-color: #DDD;
}
.container-0-1-67 p {
text-indent: 10px;
}
媒体查询
const styles = {
button: {
width: 100
},
'@media (min-width: 1024px)': {
button: {
width: 200
}
}
}
使用ES6常量
const minWidth = 1024
const styles = {
button: {
width: 100
},
[`@media (min-width: ${minWidth}px)`]: {
button: {
width: 200
}
}
}
编译为：
.button-0 {
width: 100px;
}
@media (min-width: 1024px) : {
.button-0 {
width: 200px;
}
}
关键帧动画
关键帧名称将使用与类名称相同的id生成器函数。动画名称默认为作用域。要在同一样式表中访问它，可以将$ref语法用作animationName或animation属性的值。
此外，你可以通过sheet.keyframes。{name}映射访问生成的名称。
要生成全局动画名称，可以使用@global规则。
const styles = {
'@keyframes slideRight': {
from: {opacity: 0},
to: {opacity: 1}
},
container: {
animationName: '$slideRight'
}
}
编译为：
@keyframes keyframes-slideRight-0 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container-1 {
animation-name: keyframes-slideRight-0;
}
使用@global
const styles = {
'@global': {
body: {
color: 'green'
},
a: {
textDecoration: 'underline'
}
}
}
备选值
const styles = {
container: {
background: 'linear-gradient(to right, red 0%, green 100%)',
fallbacks: {
background: 'red'
}
}
}
或者
const styles = {
container: {
display: 'flex',
fallbacks: [{display: 'box'}, {display: 'flex-box'}]
}
}
编译为：
.container-0 {
background: red;
background: linear-gradient(to right, red 0%, green 100%);
}
使用@font-face自定义字体
const styles = {
'@font-face': {
fontFamily: 'MyWebFont',
src: 'url(webfont.eot)'
}
}
// 或
const styles = {
'@font-face': [
{
fontFamily: 'MyWebFont',
src: 'url(webfont.eot)'
},
{
fontFamily: 'MySecondFont',
src: 'url(webfont2.eot)'
}
]
}
编译为：
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
}
// 或
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
}
@font-face {
font-family: 'MySecondFont';
src: url('webfont2.eot');
}
空格和逗号分隔值的替代语法
为了以JavaScript方式描述用空格或逗号分隔的CSS值，jss引入了基于数组的语法。
使用此语法有一些优点：
1、插件jss-plugin-default-unit能够有效设置数字值的默认单位。
2、你可以在值声明中使用变量，而无需使用字符串模板或串联。
逗号分隔值
const styles = {
button: {
// 逗号分隔值，内部包含常规CSS字符串
border: ['1px solid red', '1px solid blue']
}
}
编译为：
.button-0 {
border: 1px solid red, 1px solid blue;
}
const styles = {
button: {
// 逗号分隔值，内部包含常规CSS字符串.
border: [
// 数字可以自动成为默认单位。
[1, 'solid', 'red'],
[1, 'solid', 'blue']
]
}
}
编译为：
.button-0 {
border: 1px solid red, 1px solid blue;
}
以空格分隔的值
const styles = {
button: {
// 以空格分隔的值。
margin: [[5, 10]]
}
}
编译为：
.button-0 {
margin: 5px 10px;
}
修饰符!important
const styles = {
button: {
color: [['red'], '!important'],
margin: [[5, 10], '!important']
}
}
编译为：
.button-0 {
color: red !important;
margin: 5px 10px !important;
}
属性content
将字符串分配给content属性时，在CSS中需要双引号或单引号。因此，你还必须在内容的值字符串中提供引号，使得属性content能匹配正解的表示形式。
const styles = {
button: {
'&:after': {
content: '"JSS"'
}
}
}
编译为：
.button-0:after {
content: 'JSS';
}
参考
JSS
