update with less demo

Author: SyMind

examples/with-less/package.json

@@ -41,7 +41,7 @@
     "next": "^12.1.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "tarojs-plugin-platform-nextjs": "/Users/bytedance/Documents/github/tarojs-plugin-platform-nextjs/packages/nextjs"
+    "tarojs-plugin-platform-nextjs": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

examples/with-less/src/pages/index/index.module.less

@@ -1,3 +1,20 @@
-.main {
-    background-color: red;
+// mixins
+.bordered {
+    border-top: dotted 1px black;
+    border-bottom: solid 2px black;
+}
+
+.a {
+    color: #111;
+    .bordered();
+}
+
+// functions
+@base: #f04615;
+@width: 1;
+
+.functions {
+    width: percentage(@width);
+    color: saturate(@base, 5%);
+    background-color: spin(lighten(@base, 25%), 8);
 }

examples/with-less/src/pages/index/view.tsx

@@ -2,9 +2,10 @@ import {View} from '@tarojs/components'
 import styles from './index.module.less';
 
 const IndexView = () => (
-    <View className={styles.main}>
-        Hello, world!
-    </View>
+    <>
+        <View className={styles.a}>混合（Mixins）</View>
+        <View className={styles.functions}>函数（Functions）</View>
+    </>
 );
 
 export default IndexView